用html写一段代码表示背景图片的变化 要求:设置一个块,默认显示图片中第一个笑脸,鼠标经过时显示最后一个笑脸
时间: 2024-10-13 08:17:16 浏览: 22
你可以使用HTML和CSS结合来实现这个效果。首先,创建一个包含两个笑脸图像的`<div>`元素,并为其添加默认样式和ID,然后通过CSS的`:hover`伪类来改变背景图片。以下是简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.smiley-container {
display: inline-block;
width: 100px; /* 根据需要调整宽度 */
height: 100px; /* 根据需要调整高度 */
background-image: url('first_smile.png'); /* 首张笑脸图片路径 */
background-repeat: no-repeat;
background-position: center;
}
.smiley-container:hover {
background-image: url('last_smile.png'); /* 最后一张笑脸图片路径 */
}
</style>
</head>
<body>
<div id="smiley" class="smiley-container"></div>
</body>
</html>
```
在这个例子中,`.smiley-container`是容器,它默认显示`first_smile.png`这张笑脸。当鼠标悬停在`#smiley`上时,背景图片会切换到`last_smile.png`。
阅读全文