如何实现鼠标悬停按钮时为文本添加删除线效果？

很容易就能实现你想要的效果！只需要利用CSS的:hover伪类选择器，给按钮添加鼠标悬停时的样式即可。

修改后的完整代码： #

button {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  color: white;
}

/* 新增的悬停样式 */
button:hover {
  text-decoration: line-through;
}

body {
  background-color: black;
}

<button>Hello</button>

原理说明： #

• button:hover 这个选择器会在用户鼠标悬停在按钮元素上时触发对应的样式规则
• text-decoration: line-through 是CSS中专门用来给文本添加删除线的属性，完美匹配你的需求

这样修改之后，当你把鼠标放到按钮上，"Hello"文本就会自动显示删除线啦～

内容的提问来源于stack exchange，提问作者user9269971