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设置网址，为什么不使用空白<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>

Answer 2

而不是使用

content: url('image1.png');

试试这个

background-image: url('image.png');

这是一个了解更多信息的好网站 http://www.corelangs.com/css/box/hover.html

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

2 个答案: