用CSS在悬停时更改图像？

Question

用CSS在悬停时更改图像？

4

我感到非常困惑。我试图做一些看起来非常简单的事情，但是却失败了。我想让图片“b.png”更改为“c.png”。你能找出我错在哪里吗？

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head> 
<body>
    <div class="main">
        <img src="b.png" />
    </div>
</body>
</html>

style.css

.main:hover {
    background-image: url('c.png');
}

- user1125551

2

你的CSS已经生效了，但是背景图片在另一张图片后面... - bfavaretto

2个回答

0

你所做的没有问题，除了图片（b.png）肯定是在背景之上...所以你看不到背景图片。

- Isaac Fife

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KRyan · Accepted Answer

您的 <div class="main"> 元素正在使用 c.png 作为其背景 - 您只是看不到它，因为在它后面有一个 <img src="b.png"> 元素。

尝试删除该 <img> 标签，然后使用以下 CSS：

.main {
    background-image: url(b.png);
}

.main:hover {
    background-image: url(c.png);
}

你可能还需要为.main设置高度和宽度，因为它内部没有任何内容来确定它的尺寸。