html - 如何使用 css 将鼠标悬停在文本上时显示图像？

Question

我有一个文本列表，当用户将鼠标悬停在每行文本上时，我希望在它的旁边显示一个小图像。我已经尝试将图像设为“visibility:hidden”，然后将鼠标悬停在链接文本“visibility: visible”上，但这对我不起作用。请帮忙。

JSFiddle 链接: http://jsfiddle.net/ML9wT/2/

编辑:链接。

HTML

<ul class="song-links">
    <li id="track-one"><span class="num-color">1.</span>
    <a href="#">one<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>


    <li id="track-two"><span class="num-color">2.</span>
    <a href="#">two<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

    <li id="track-three"><span class="num-color">2.</span>
    <a href="#">three<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

</ul>

CSS

.song-links {
letter-spacing: 1px;
list-style: none;
color: black;
visibility: visible;
}

.song-selector {
display: inline;
margin-left: 8px;
}

Answer 1

尝试:

.song-links {
  letter-spacing: 1px;
  list-style: none;
  color: black;
}

.song-selector {
  display: inline;
  margin-left: 8px;
  visibility: hidden;
}

.song-links li:hover .song-selector {
  visibility: visible;
}