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

【问题标题】：change opacity of one div by hovering over another div通过将鼠标悬停在另一个 div 上来更改一个 div 的不透明度
【发布时间】：2014-08-01 09:37:32
【问题描述】：

我有问题。我制作了一个自定义的 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>

【问题讨论】：

标签： css hover

【解决方案1】：

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

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

【讨论】：