当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。