CSS伪类:hover用于after和before元素

Question

<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;
}
​

示例 http://jsfiddle.net/zfQvD/4/

我创建了一个箭头，但当我将鼠标悬停在盒子上时，箭头背景没有改变。如何在鼠标悬停在盒子上时更改箭头的背景？谢谢。

- olo

Answer 1

箭头是由 :after 伪元素的边框制成的，所以要更改该颜色，请使用以下代码：

#box:hover:after{border-top-color: blue;}

http://jsfiddle.net/mowglisanu/zfQvD/9/

- Musa

---

谢谢，我们能在 AFTER 中使用 -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; 吗？似乎不行？http://jsfiddle.net/zfQvD/13/ 再次感谢。 - olo

Answer 2

简单！

#box:hover:after {
    border-top-color: blue;
}

- Hubro