CSS悬停在元素之后和之前

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/

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

Answer 1

箭头由：after伪元素的边框构成，因此要更改该颜色

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

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

Answer 2

初​​等！

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