用CSS在鼠标悬停时改变图像?

I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?

我很迷惑。我正在尝试做一些看似简单但却失败得很惨的事情。我想要b的图像。png c.png“变化”。“你能找出我哪里出错了吗?

index.html

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

style.css

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

2 个解决方案

#1

Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.

你的

得到c。png作为背景-你不能在用CSS在鼠标悬停时改变图像?

元素。

Try removing that <img> tag, and using this for your CSS:

试着删除这个用CSS在鼠标悬停时改变图像? 标签，并将其用于CSS:

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

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

You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.

你可能还需要给。main一个高度和宽度，因为它不再有任何东西在里面，以给它一个大小。

#2

Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.

你所做的一切都没有错，除了图片(b.png)当然是在背景之上……所以你看不到背景图像。

#1