设置按钮鼠标悬停时的图片和平时的图片
时间: 2023-10-04 13:04:09 浏览: 81
要设置按钮在鼠标悬停时显示不同的图片,你可以使用CSS的`:hover`伪类选择器来实现。下面是一个示例的HTML和CSS代码:
HTML代码:
```html
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button class="scroll-button"></button>
</body>
</html>
```
CSS代码(styles.css):
```css
.scroll-button {
width: 100px;
height: 100px;
background-image: url(normal-image.png); /* 设置按钮平时显示的图片 */
background-size: cover;
border: none;
}
.scroll-button:hover {
background-image: url(hover-image.png); /* 设置按钮鼠标悬停时显示的图片 */
}
```
在示例代码中,我们创建了一个按钮(`.scroll-button`),并设置了按钮的宽度、高度和背景图片。通过`background-image`属性可以设置按钮的背景图片,初始状态下使用`normal-image.png`作为背景图片。
然后,使用`:hover`伪类选择器来定义鼠标悬停时按钮的样式。在`:hover`选择器内部,我们使用`background-image`属性来指定鼠标悬停时显示的图片为`hover-image.png`。
你可以根据需要替换`normal-image.png`和`hover-image.png`为实际的图片文件路径。确保这两个图片文件存在并位于正确的路径下。
这样,当鼠标悬停在按钮上时,按钮将显示`hover-image.png`的图片,平时则显示`normal-image.png`的图片。