css - 通过将鼠标悬停在另一个 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

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

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

JSFiddle