如何在使用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;
}

Answer 2

默认情况下，我用display: none隐藏图像。 在链接悬停时，它们切换到display: inline

此外，您不需要打开和关闭img标记。 Img是一个自动关闭的标签。

更新了jsfiddle： http ： //jsfiddle.net/w8H2P/2/

<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" /></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" /></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" /></div></a>
</li>

a img {
    display: none;
}

a:hover img {
    display: inline;   
}

Answer 3

试试看：

song-links span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}

你可以在这个网站上看到例子： 4Stable Life