[英]Style hover state of element when hovering over overlapping elements with CSS
我有一个包含几个div的DOM结构。 在视觉上,这些Div中的一些是其他人的孩子,但在DOM结构中他们都是兄弟姐妹。
我需要设置“父”div的悬停状态,即使悬停在其“子”div上也是如此。
有没有Javscript这样做的方法? 也许通过使用div的当前位置来知道它们在另一个div中?
更新
问题是父母实际上是兄弟姐妹。 只有一个容器,让我们说8个孩子的div。 2是更大的div,其他6个在每个更大的div内显示3。 就像是:
只有徘徊的孩子周围的父母才能改变颜色。
我无法改变BTW的DOM结构。
我想不出用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 );
};
不,你不能仅通过CSS影响父母或兄弟姐妹。 只跟随兄弟姐妹,这对你没有帮助。
其他人想要一个:parent
伪类?
如何使用单个容器包围所有元素,然后执行以下操作:
#container:hover .parent { /* Hover styles applied */ }
如果样式在DOM兄弟的悬停时生效,您应该只能使用兄弟选择器:
.parent:hover ~ .child { /* styling */ }
不能做什么可以(经常)伪造。 虽然最简单的解决方案是重新排列DOM并使用相邻的兄弟选择器,但还有其他方式,即a)更复杂b)需要现代浏览器。
您可以使用伪元素伪造父项上的悬停效果。 所谓的伪元素只有在悬停它的父亲时才可见 - 在这种情况下是.child
并且绝对定位以补偿.childs
从.parent
偏移覆盖.parent
从而看起来像父改变状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.