CSS hover for after and before element

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

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

I am using after created an arrow, but when I hover on the box, the arrow background is not changed? how to change the background for arrow, when onhover the box? thanks

Answer 1

The arrow is made from the border of the :after psuedo element, so to change that colour use

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

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