是一种常见的前端开发技术,通过在CSS中使用:hover伪类选择器来实现。当用户将鼠标悬停在按钮上时,可以通过更改文本颜色来提供视觉反馈。
具体实现方法如下:
<button class="hover-button">按钮</button>
.hover-button {
background-color: #f1f1f1;
color: #000;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.hover-button:hover {
color: #fff;
background-color: #555;
}
在上述代码中,.hover-button类定义了按钮的基本样式,包括背景颜色、文本颜色、边框等。:hover伪类选择器用于设置悬停时的样式,将文本颜色设置为白色,背景颜色设置为深灰色。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云