html - 为什么在悬停时使用 CSS 过渡的不同图像源不起作用？

Question

我有一个 <a>标记，当我将鼠标悬停在它上面时，我想将图像源更改为另一个图像源，同时对图像也有过渡效果。转换适用于 background-image <div> 的属性(property)标签，但不带 content <img> 的属性(property)标签。

到目前为止，这就是我所拥有的:

.topLogo {
    height: 64px;
    content: url(image1.png);
    transition: 0.2s;
}
.topLogo:hover {
    height: 64px;
    content: url(image2.png);
}

Answer 1

我相信content:是标签之间的内容。它不适用于 <img>因为没有关闭 </img> .

没有办法用 CSS 改变 HTML 属性。你可以使用 javascript/jquery。我有一种感觉，你不想。

既然您已经在使用 CSS 设置 URL，为什么不使用空白 <span>或 <div>而不是 <img> ？

<span class="topLogo"></span>

<style>
    .topLogo:before {
        height: 64px;
        content: url('image1.png');
        transition: 0.2s;
    }
    .topLogo:before:hover {
        height: 64px;
        content: url('image2.png');
    }
</style>