如何实现元素鼠标悬停变色？按钮悬停时三角形颜色不变怎么解决？

问题1：如何实现元素在鼠标悬停时改变颜色？ #

这其实很简单，用CSS的:hover伪类就能轻松实现！:hover伪类会在鼠标悬停到目标元素上时触发对应的样式规则，你只需要针对目标元素，定义它在:hover状态下的颜色相关属性（比如color、background-color、border-color等）就可以了。

举几个实用例子：

/* 普通段落悬停时文字变红色 */
p:hover {
  color: red;
}

/* 按钮悬停时背景色和文字色互换 */
button:hover {
  background-color: #ffe200;
  color: black;
}

问题2：修复按钮旁三角形悬停时颜色不变的问题 #

你遇到的核心问题是：按钮悬停时，通过:after伪元素生成的三角形颜色没跟着变化。这是因为你在button[type=submit]:hover里设置的border-color是作用于按钮本身的，但按钮本身没有边框，而三角形的边框样式是定义在button[type=submit]:after这个伪元素上的——伪元素的样式是独立于父元素的，所以你需要单独给悬停状态下的伪元素设置样式。

修改后的完整CSS代码： #

* { 
  text-align: center; 
  margin: 0; 
  padding: 0; 
} 

button[type=submit] { 
  padding: 20px 30px; 
  background-color: black; 
  border: 0; 
  position: relative; 
  color: #ffe200; 
  font-size: 22px; 
} 

button[type=submit]:after { 
  content: ''; 
  border-width: 23px; 
  border-color: transparent black black transparent; 
  border-style: solid; 
  position: absolute; 
  top: 9.5px; 
  left: 228px; 
  -webkit-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
} 

button[type=submit]:hover { 
  color: black; 
  background-color: #ffe200; 
}

/* 新增这部分：给悬停状态下的伪元素修改边框颜色 */
button[type=submit]:hover:after {
  border-color: transparent #ffe200 #ffe200 transparent;
}

关键说明： #

• 原来的代码里，你试图在button[type=submit]:hover里修改border-color，但这个样式只会作用于按钮本身，不会传递给伪元素。
• 必须使用button[type=submit]:hover:after这个选择器，才能精准选中“悬停状态下的按钮的:after伪元素”，然后修改它的border-color，这样三角形的颜色就会跟着按钮一起变化了。

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