Question

我有一个网站，其中包含三个带文字的链接。

当我将鼠标悬停在文字链接上显示特定图片时，我正试图这样做。

我已经能够将鼠标悬停在上面并更改文字的颜色。

但我无法弄清楚如何让每个链接悬停在不同的图像上。

[ "doNotTrack", "mozPay", "mozContacts", "mozApps" ]

Answer 1

＆＃13;

.flex-item > img       { display: none; }
.flex-item:hover > img { display: inline; }
.flex-item:hover > a   { display: none; }
.flex-container        { display: flex; }

＆＃13;

<div class="flex-container">
    <div class="flex-item">
        <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <a href="ArchitectureWork.html">arch</a>
    </div>
</div>

＆＃13;

Answer 2

当img的父div悬停时，你可以使用CSS来显示img。像这样：

.flex-item img {
  display: none;
}

.flex-item:hover img {
  display: block;
}

.flex-item:hover a {
  color: #FFFFFF;
}

DEMO：https://jsfiddle.net/xbkrnrhd/1/

或者你可以将img放在一个元素中。

a img {
  display: none;
}

a:hover {
  color: white;
}

a:hover img {
  display: block;
}

Answer 3

.div-class:hover {
  content:url("https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png");
}

在悬停时将文本链接转换为图像

3 个答案: