用于after和before元素的CSS悬停 ​ #盒子{ 高度：40px； 宽度：100px； 背景：红色； } #框：悬停{背景：蓝色；} #盒子：之后{ 内容：“； 高度：10px； 位置：绝对位置； 宽度：0； 边缘顶部：50px； 背景：红色； 边框：10px实心透明； 边框顶部颜色：#04ADE5； } ​

样品

---

我在创建箭头后使用，但当我将鼠标悬停在框上时，箭头背景不会改变？当鼠标悬停在框上时，如何更改箭头的背景？感谢

箭头由：after psuedo元素的边框制成，因此要更改该颜色，请使用

#框：悬停：在{边框顶部颜色：蓝色；}之后

简单

<div id="box"></div>​

#box{
height:40px;
width:100px;
background:red;
}

#box:hover{background:blue;}

#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
    margin-top:50px;
background:red;
border: 10px solid transparent;
border-top-color: #04ADE5;
}
​

---

感谢您，我们是否能够使用

-webkit转换：所有1都易于输入输出-moz转换：所有1都易于输入输出-o型转换：所有1均易于输入输出；过渡：所有1都易于输入输出之后？似乎没有？再次感谢
#box:hover:after {
    border-top-color: blue;
}