影响div:悬停与另一个div
我正在做一个画廊,当你将鼠标悬停在主图像上时,缩略图应该变得透明。我想用纯CSS实现这一点,但我不确定这是否可能。影响div:悬停与另一个div
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
这可能使用纯CSS?
即使它是,它不会在IE浏览器:)
我会用onmouseover事件表明
但它是很好的问题,我很好奇,如果有人这样做跨浏览器的解决方案通过css
它不需要在IE中工作,我已经知道如何写回退,但我不认为我会打扰这一点。它更像是一个个人网站。 – JacobTheDev
@rev:参见Nightfirecat提供的解决方案。这是惊人的,它在IE 7和8的工作 - 我已经测试 – mkk
你可以用CSS来做到这一点。看到我的[纯CSS信号栏评级小部件答案](http://*.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900),这表明您可以改变甚至(看起来)在DOM *之前显示的元素的样式。 –
只有选择器的孩子可能会受到影响。否则,你需要使用JavaScript。
例如:
div:hover #childDiv {
background: green;
}
我想你会需要一些JavaScript为。
你可以单独使用CSS来做到这一点。看到我的[纯CSS信号栏评级小部件答案](http://*.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900),这表明您可以改变甚至(看起来)在DOM *之前显示的元素的样式。 –
认真吗? 4年后下调? –
现在和现在一样错了。我昨天偶然发现了答案。我不是可以在发布时阅读答案的版主;只是一个随机用户,他们从网络搜索到达这里。 –
不可以。您必须使用Javascript。
你可以单独使用CSS来做到这一点。看到我的[纯CSS信号栏评级小部件答案](http://*.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900),这表明您可以改变甚至(看起来)在DOM *之前显示的元素的样式。 –
#DIV1:悬停+#{DIV2 ... }
它在IE 7,8,9和10中工作正常。不需要任何JS或onovermouse和不仅选择器的孩子可能会受到影响。
尝试“Nightfirecat”的示例链接。
+1惊人......甚至不知道这个存在! http://meyerweb.com/eric/articles/webrev/200007a.html – samccone
哇!谢谢!这绝对是完美的!就像上面的那个人一样,我不知道这个存在。完善。 – JacobTheDev
+1我不知道你可以做到这一点没有Javascript。 –