html鼠标放在按钮上变色

要实现鼠标悬停在按钮上时按钮变色，可以使用CSS来完成。以下是一个简单的HTML和CSS示例：

HTML:




<button class="hover-button">Hover Over Me!</button>

CSS:




.hover-button {
  background-color: #4CAF50; /* 默认背景颜色 */
  color: white; /* 文字颜色 */
  padding: 15px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标光标变成手指形状 */
  transition: background-color 0.3s; /* 过渡效果 */
}
 
.hover-button:hover {
  background-color: #3e8e41; /* 鼠标悬停时的背景颜色 */
}

这段代码定义了一个带有悬停效果的按钮。当鼠标悬停在.hover-button类上时，按钮的背景颜色会平滑地变为#3e8e41。

html鼠标放在按钮上变色

评论已关闭

推荐阅读