vol stationnaire CSS pour avant et après l'élément

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

Exemple http://jsfiddle.net/zfQvD/4/

J'utilise après créé une flèche, mais quand je passe la souris sur la boîte, l'arrière-plan de la flèche ne change pas? comment changer l'arrière-plan pour la flèche, quand on est dans la boîte? grâce

Answer 1

La flèche est faite à partir de la frontière du: après élément psuedo, afin de changer la couleur qui utilisent

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

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

Answer 2

élémentaire!

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