我的网站上有一个图像链接，当我将鼠标悬停在其上时，该链接会发生变化，如何将两个图像都转换为链接？

Question

我的网站使用图像作为另一个页面的链接，我决定将鼠标悬停在图像上时更改图像，以获得一些额外的效果。我找到了一种方法来做到这一点，但我发现悬停图像没有链接到任何地方，它只是一个静态图像。我根本不擅长 CSS，所以我完全不知道如何解决这个问题。

这是我当前使用的代码（我包含了 CSS 和 HTML，希望没问题。）

.avatar {
    border: 1px solid #000;
    width: 170px;
    height: 170px;
    margin-bottom: 12px;
    background-image: url('https://radiationcat.neocities.org/f880349c84b78fc62ff089d46cbafef2.jpg') 
}
.avatar:hover {
content: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
    height: 170px;
    width: 170px;
}

<div class="avatar"><a href="gallery.html"><img src="https://file.garden/ZRo4aD_G0TetIeK6/me.png"></a></div>

Answer 1

你很接近；但内容适用于 img 节点，因此您必须更改 img 的 css，而不是头像 div。

试试这个CSS：

.avatar {
    border: 1px solid #000;
    margin-bottom: 12px;
    width: 170px;
    height: 170px;
}
.avatar a img {
    width: 100%;
    height: 100%;
}
.avatar:hover a img {
    content: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
}

希望有帮助