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