[英]Style hover state of element when hovering over overlapping elements with CSS
I have a DOM structure containing several divs. 我有一个包含几个div的DOM结构。 Visually, some of these Divs are children of others, but in the DOM Structure they are all siblings.
在视觉上,这些Div中的一些是其他人的孩子,但在DOM结构中他们都是兄弟姐妹。
I need to style the hover state of the "parent" divs even when hovering over its "child" divs. 我需要设置“父”div的悬停状态,即使悬停在其“子”div上也是如此。
Is there a way of doing this without Javscript? 有没有Javscript这样做的方法? Maybe by using the current position of the divs to know they are inside of another div?
也许通过使用div的当前位置来知道它们在另一个div中?
Update 更新
The problem is the parents are actually siblings. 问题是父母实际上是兄弟姐妹。 There's only one container and let's say 8 children divs.
只有一个容器,让我们说8个孩子的div。 2 are bigger divs and the other six are shown 3 inside each bigger div.
2是更大的div,其他6个在每个更大的div内显示3。 Something like:
就像是:
http://jsfiddle.net/XazKw/12/ http://jsfiddle.net/XazKw/12/
Only the parent surrounding the hovered children should change color. 只有徘徊的孩子周围的父母才能改变颜色。
I can't change the DOM structure BTW. 我无法改变BTW的DOM结构。
I can't think of a clean (or even a hacky) way of doing it with just CSS. 我想不出用CSS做干净(甚至是hacky)的方法。 Here's a Javascript method if you don't figure anything else out.
如果你没有想出任何其他的东西,这是一个Javascript方法。 Just trap
mousemove
on body
. 只是将
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 );
};
Demo: http://jsfiddle.net/ThinkingStiff/UhE2C/ 演示: http : //jsfiddle.net/ThinkingStiff/UhE2C/
HTML: HTML:
<div id="parent"></div>
<div id="overlap"></div>
CSS: 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;
}
Script: 脚本:
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 );
};
No, you can't affect parents or previous siblings through CSS alone. 不,你不能仅通过CSS影响父母或兄弟姐妹。 Only following siblings, which doesn't help you here.
只跟随兄弟姐妹,这对你没有帮助。
Anyone else want a :parent
pseudo-class? 其他人想要一个
:parent
伪类?
How about surrounding all the elements with a single container, and then doing something like: 如何使用单个容器包围所有元素,然后执行以下操作:
#container:hover .parent { /* Hover styles applied */ }
Like: http://jsfiddle.net/Wexcode/XazKw/ 喜欢: http : //jsfiddle.net/Wexcode/XazKw/
如果样式在DOM兄弟的悬停时生效,您应该只能使用兄弟选择器:
.parent:hover ~ .child { /* styling */ }
What can't be done can (often) be faked. 不能做什么可以(经常)伪造。 While the most simple solution would be to rearange the DOM and using adjacent sibling selector there is other way, that is a) more complicated b) requires a modern browser.
虽然最简单的解决方案是重新排列DOM并使用相邻的兄弟选择器,但还有其他方式,即a)更复杂b)需要现代浏览器。
You can use pseudo-elements to fake a hover effect on parent. 您可以使用伪元素伪造父项上的悬停效果。 Said pseudo-element would be only visible when hovering it's parent -
.child
in this case:) and positioned absolutely to compensate .childs
offset from .parent
covering the .parent
thus looking like the parent changed state. 所谓的伪元素只有在悬停它的父亲时才可见 - 在这种情况下是
.child
并且绝对定位以补偿.childs
从.parent
偏移覆盖.parent
从而看起来像父改变状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.