通过将鼠标悬停在另一个div上来更改一个div的不透明度

Question

我有个问题。我制作了一个自定义html5 soundcloud播放器，并且有一个包含图像的播放列表。我想通过将鼠标悬停在图像上来显示图像的标题。

例如，我做了一个简单的jsfiddle：http : //jsfiddle.net/dC85Q/

目前，不透明度仅在我将鼠标移至标题div时才会更改。但是，当我将鼠标移至图像div时，它应该会改变。我知道使用javascript的可能性，但我不想为此使用javascript。有办法用CSS吗？

我的html：

<div id="song1" class="songs" onclick="song1()">
    <div id="songtitle1" class="songtitles">Hello World</div>
</div>

Answer 1

在上使用:hover伪选择器.songs，然后定位.songtitles并更改其不透明度：

.songs:hover .songtitles {
    opacity: 1;
}

JSFiddle