html - 使用 CSS 悬停在重叠元素上时元素的样式悬停状态

Question

我有一个包含多个 div 的 DOM 结构。从视觉上看，这些 Div 中的一些是其他 Div 的子级，但在 DOM 结构中它们都是兄弟。

即使悬停在其“子”div 上时，我也需要设置“父”div 的悬停状态的样式。

有没有不用 Javscript 的方法？也许通过使用 div 的当前位置来知道它们在另一个 div 中？

---

更新

---

问题是 parent 实际上是 sibling 。只有一个容器，假设有 8 个子 div。 2 是更大的 div，其他六个在每个更大的 div 中显示 3。像这样的东西:

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

只有围绕悬停的 child 的 parent 应该改变颜色。

顺便说一句，我无法更改 DOM 结构。

Answer 1

我想不出仅使用 CSS 的干净(甚至是 hacky)方式。如果您没有想出任何其他方法，这里有一个 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 );

};