Html 悬停图像

我有一个场景，在这个场景中，我有一个团队页面，上面有图片和一些简介。在每张图片下，我都有如下社交媒体链接：

这些图像位于每个项目下方的水平列表中，使用下面的基本标记

<ul>
    <li>
        <a><img src=""/></a>
    </li>
    <li>
        <a><img src=""/></a>
    </li>
</ul>

目前这些都是图片，但我非常希望当这些图片的灰色部分被悬停时变成蓝色

我在想，只要有一个跨度，背景图像如下：

<a><span class="linkedin"></span></a>

.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}

.linkedin:hover{
    height:28px;
    width:auto;
    background-image:url(link/to/the/linkedin/picture-blue-version)
    }

.linkedin{
高度：28px；
宽度：自动；
背景图片：url（link/to/the/linkedin/picture）
}
.linkedin:悬停{
高度：28px；
宽度：自动；
背景图片：url（link/to/the/linkedin/picture蓝色版本）
}

然而，当我尝试这样做时，空间是空的，而不是图像的大小

如果我作为内容输入，我会得到背景图像的一小部分，而且给类一个绝对位置会使它脱离文档FLO

---

这是理想的方法吗？

最好的方法是使用SVG并在悬停时更改SVG的填充

您的方法应该有效，但是，可能是您没有获得正确大小的图像？试试“背景尺寸：封面；”或者元素没有宽度。尝试在跨度上设置宽度。（别忘了也给它“display:inline block；”

---

Ed:checkout

最好的方法是使用SVG并在悬停时更改SVG的填充

但是，您的方法应该可行，可能是您没有获得正确大小的图像？请尝试“背景大小：cover；”或元素没有宽度。也可以尝试在跨度上设置宽度。（不要忘记也为其指定“display:inline block；”

---

Ed:checkout

问题是，如果使用

元素，则需要将其设置为

显示：内联块

，并且需要设置图像显示的

宽度

.linkedin{
显示：内联块；
宽度：140px；
高度：100px；
背景图片：url(http://ipsumimage.appspot.com/140x100，ff7700）
}
.linkedin:悬停{
背景图片：url(http://ipsumimage.appspot.com/140x100，0000FF）
}

---

问题在于，如果使用

元素，则需要将其设置为

显示：内联块

，并且需要设置图像显示的

宽度

.linkedin{
显示：内联块；
宽度：140px；
高度：100px；
背景图片：url(http://ipsumimage.appspot.com/140x100，ff7700）
}
.linkedin:悬停{
背景图片：url(http://ipsumimage.appspot.com/140x100，0000FF）
}

---

字体对于您想要实现的目标来说，非常棒。如果您可以使用文本代替图像，那么加载页面所需的数据也会更少

---

顺便说一句，当使用：hover属性时，不需要重新定义图像的宽度和高度…只需重新定义您想要进行的更改。

字体Awesome是一个很好的主意，可以实现您的目标。如果您可以使用文本代替图像，则加载页面所需的数据也会更少

---

顺便说一句，当使用：hover属性时，不需要重新定义图像的宽度和高度……只需重新定义您想要进行的更改。

不是真正的“解决方案”就其本身而言，但我会使用像这样的图标字体。你可以通过改变字体颜色来改变图标颜色。这确实让社交图标变得更容易。这不是一个真正的“解决方案”就其本身而言，但我会使用一种图标字体，比如。你可以通过改变字体颜色来改变图标的颜色。这真的让社交图标变得更容易。这是一个非常聪明的解决方案，很有趣，因为我不必设置甚至使用背景图像，这意味着我可以添加诸如替代文本之类的内容。这是一个版本这是一个聪明的解决方案，很有趣，因为我不需要设置甚至使用背景图像，这意味着我可以添加诸如替代文本之类的内容。