當CSS懸停在重疊元素上時，元素的懸停狀態

Question

我有一個包含多個div的DOM結構。在視覺上，其中一些Div是其他人的子女，但在DOM Structure中，他們都是兄弟姐妹。

我需要對「父」div的懸停狀態進行樣式設置，即使在懸停在其「子」div上時也是如此。

有沒有辦法做到這一點沒有Javscript？也許通過使用div的當前位置知道他們在另一個div裏面？

---

更新

---

的問題是父母實際上是兄弟姐妹。只有一個容器，讓我們說8個孩子的div。 2個是較大的div，另外六個在每個較大的div內顯示3個。喜歡的東西：

http://jsfiddle.net/XazKw/12/

只有周圍懸停兒童應改變顏色的家長。

我無法改變DOM結構。

Answer 1

怎麼樣的所有元素，圍繞着一個容器，然後做這樣的事情：

#container:hover .parent { /* Hover styles applied */ } 

像：http://jsfiddle.net/Wexcode/XazKw/

Answer 2

如果造型需要在一個DOM同級的懸停效果，你應該只能夠使用兄弟選擇器：

.parent:hover ~ .child { /* styling */ } 

Answer 3

我不能想到一個乾淨的（甚至是黑客）的方式，只用CSS。這裏有一個Javascript方法，如果你沒有指出任何其他的東西。只需在body上設置mousemove即可。

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

演示：http://jsfiddle.net/ThinkingStiff/UhE2C/

HTML：

<div id="parent"></div> 
<div id="overlap"></div> 

CSS：

#parent { 
    border: 1px solid red; 
    height: 100px; 
    left: 50px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

#overlap { 
    background-color: blue; 
    border: 1px solid blue; 
    height: 100px; 
    left: 115px; 
    position: absolute; 
    top: 130px; 
    width: 100px; 
    z-index: 1; 
} 

腳本：

document.body.addEventListener('mousemove', function (event) { 

    if(isOver(document.getElementById('parent'), event)) { 
     document.getElementById('parent').innerHTML = 'is over!';   
    } else { 
     document.getElementById('parent').innerHTML = ''; 
    }; 

}, false);   

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Answer 4

不，您不能通過CSS單獨影響父母或以前的兄弟姐妹。只跟隨兄弟姐妹，這對你沒有幫助。

其他人想要一個:parent僞類？

Answer 5

什麼不能做可以（經常）僞造。雖然最簡單的解決方案是重新排列DOM並使用相鄰的兄弟選擇器，但還有其他方法，那就是a）更復雜b）需要現代瀏覽器。

您可以使用僞元素來僞造父級上的懸停效果。說盤旋它的父當僞元素將是唯一可見的 - 在這種情況下:) .child和定位絕對補償.childs從.parent覆蓋.parent因此看起來像父改變了狀態偏移。

Fiddle here。