为什么带有CSS转换的不同图像源在悬停时不起作用？

Question

我有一个<a>标签,当我将鼠标悬停在其上时,我想将图像源更改为另一个图像源,同时对图像也有过渡效果.转换使用标记的background-image属性<div>,但不使用标记的content属性<img>.

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

.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>