使用CSS将鼠标悬停在重叠元素上时,样式悬停状态

时间:2011-12-20 18:01:07

标签: html css

我有一个包含几个div的DOM结构。在视觉上,这些Div中的一些是其他人的孩子,但在DOM结构中他们都是兄弟姐妹。

我需要设置“父”div的悬停状态,即使将鼠标悬停在“子”div上也是如此。

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


更新


问题是父母实际上是兄弟姐妹。只有一个容器,让我们说8个孩子的div。 2是更大的div,其他6个在每个更大的div内显示3。类似的东西:

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

只有徘徊的孩子周围的父母才能改变颜色。

我无法改变BT结构的DOM结构。

5 个答案:

答案 0 :(得分:3)

我想不出用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 );

};

答案 1 :(得分:2)

不,你不能仅通过CSS影响父母或兄弟姐妹。只跟随兄弟姐妹,这对你没有帮助。

其他人想要一个:parent伪类吗?

答案 2 :(得分:0)

如何使用单个容器包围所有元素,然后执行以下操作:

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

赞:http://jsfiddle.net/Wexcode/XazKw/

答案 3 :(得分:0)

如果样式在DOM兄弟悬停时生效,您应该只能使用兄弟选择器:

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

答案 4 :(得分:0)

不能做什么可以(经常)伪造。虽然最简单的解决方案是重新排列DOM并使用相邻的兄弟选择器,但还有其他方法,即a)更复杂b)需要现代浏览器。

您可以使用伪元素伪造父级的悬停效果。只有悬停它的父亲 - .child在这种情况下才会显示所述伪元素,并且绝对定位以补偿.childs覆盖.parent的{​​{1}}偏移量,从而看起来像父母改变了状态。

Fiddle here