我有一个包含几个div的DOM结构.在视觉上,这些Div中的一些是其他人的孩子,但在DOM结构中他们都是兄弟姐妹.
我需要设置“父”div的悬停状态,即使悬停在其“子”div上也是如此.
有没有Javscript这样做的方法？也许通过使用div的当前位置来知道它们在另一个div中？
更新
问题是父母实际上是兄弟姐妹.只有一个容器,让我们说8个孩子. 2是更大的div,其他6个在每个更大的div内显示3.就像是：
只有徘徊的孩子周围的父母才能改变颜色.
我无法改变BTW的DOM结构.
解决方法
我想不出用CSS做干净(甚至是hacky)的方法.如果您没有想出任何其他内容,这是一个Javascript方法.只需将鼠标移动到身体上即可.
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,bottom = top + element.clientHeight;
return ( e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom );
};
