影响div：悬停在另一个div上

Question

我正在制作一个画廊，当您将鼠标悬停在主图像上时，缩略图应该变得透明。我想用纯CSS实现这一点，但我不确定这是否可行。

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吗？

Answer 1

当然，只需使用相邻的兄弟选择器：

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

此处的示例：http://jsfiddle.net/6BfR6/94/

Answer 2

只有选择器的子项才会受到影响。否则，您将需要使用javascript。

例如：

div:hover #childDiv {
  background: green;
}

Answer 3

  

＃div1：hover +＃div2 {       ...   } 的

它在IE 7,8,9和10中运行良好。不需要任何JS或onovermouse和 NOT ONLY 选择器的子项可能会受到影响。

尝试“Nightfirecat”的示例链接。

Answer 4

即使它是，它也不会在IE中工作：）

我建议使用onmouseover事件

然而，这是一个很好的问题，我很好奇是否有人通过css跨浏览器进行解决方案

Answer 5

我认为你需要一些javascript。

Answer 6

没有。你必须使用Javascript。