影响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？

来源

2011-08-15 JacobTheDev

当然，仅仅使用相邻兄弟选择：

#div1:hover + #div2 { 
    ... 
}

这里的一个例子：http://jsfiddle.net/6BfR6/94/

来源

2011-08-15 19:31:29 Nightfirecat

+1惊人......甚至不知道这个存在！ http://meyerweb.com/eric/articles/webrev/200007a.html – samccone

哇！谢谢！这绝对是完美的！就像上面的那个人一样，我不知道这个存在。完善。 – JacobTheDev

+1我不知道你可以做到这一点没有Javascript。 –

-1

即使它是，它不会在IE浏览器:)

我会用onmouseover事件表明

但它是很好的问题，我很好奇，如果有人这样做跨浏览器的解决方案通过css

来源

2011-08-15 19:31:03 mkk

它不需要在IE中工作，我已经知道如何写回退，但我不认为我会打扰这一点。它更像是一个个人网站。 – JacobTheDev

@rev：参见Nightfirecat提供的解决方案。这是惊人的，它在IE 7和8的工作 - 我已经测试 – mkk

你可以用CSS来做到这一点。看到我的[纯CSS信号栏评级小部件答案]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900），这表明您可以改变甚至（看起来）在DOM *之前显示的元素的样式。 –

只有选择器的孩子可能会受到影响。否则，你需要使用JavaScript。

例如：

div:hover #childDiv { 
    background: green; 
}

来源

2011-08-15 19:31:14 Trevor

-1

我想你会需要一些JavaScript为。

来源

2011-08-15 19:31:17

你可以单独使用CSS来做到这一点。看到我的[纯CSS信号栏评级小部件答案]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900），这表明您可以改变甚至（看起来）在DOM *之前显示的元素的样式。 –

认真吗？ 4年后下调？ –

现在和现在一样错了。我昨天偶然发现了答案。我不是可以在发布时阅读答案的版主;只是一个随机用户，他们从网络搜索到达这里。 –

-1

不可以。您必须使用Javascript。

来源

2011-08-15 19:31:18

＃DIV1：悬停+＃{DIV2 ... }

它在IE 7,8,9和10中工作正常。不需要任何JS或onovermouse和不仅选择器的孩子可能会受到影响。

尝试“Nightfirecat”的示例链接。

来源

2013-03-10 12:44:38 dsgsd

影响div：悬停与另一个div

回答

相关问题