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