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

箭头是从的边界做：伪元素之后，因此要改变这种颜色使用

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

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

Answer 2

小学！

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