Question

我很迷茫。我正在尝试做一些看似如此简单但却失败的事情。我想将图像“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');
}

Answer 1

您的<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一个高度和宽度，因为它里面不再有任何东西可以给它一个大小。

Answer 2

你正在做什么没有错，除了图像（b.png）当然是在背景之上......所以你看不到背景图像。

使用CSS在悬停时更改图像？

2 个答案: