使用CSS將鼠標懸停在重疊元素上時，樣式懸停狀態

Question

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

我需要設置“父”div的懸停狀態，即使懸停在其“子”div上也是如此。

有沒有Javscript這樣做的方法？ 也許通過使用div的當前位置來知道它們在另一個div中？

---

更新

---

問題是父母實際上是兄弟姐妹。 只有一個容器，讓我們說8個孩子的div。 2是更大的div，其他6個在每個更大的div內顯示3。 就像是：

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

只有徘徊的孩子周圍的父母才能改變顏色。

我無法改變BTW的DOM結構。

Answer 1

我想不出用CSS做干凈（甚至是hacky）的方法。 如果你沒有想出任何其他的東西，這是一個Javascript方法。 只是將mousemove到body 。

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 2

不，你不能僅通過CSS影響父母或兄弟姐妹。 只跟隨兄弟姐妹，這對你沒有幫助。

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

Answer 3

如何使用單個容器包圍所有元素，然后執行以下操作：

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

喜歡： http ： //jsfiddle.net/Wexcode/XazKw/

Answer 4

如果樣式在DOM兄弟的懸停時生效，您應該只能使用兄弟選擇器：

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

Answer 5

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

您可以使用偽元素偽造父項上的懸停效果。 所謂的偽元素只有在懸停它的父親時才可見 - 在這種情況下是.child並且絕對定位以補償.childs從.parent偏移覆蓋.parent從而看起來像父改變狀態。

在這里小提琴