css - 要素の前後の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 psuedo要素の境界から作成されているため、その色を変更するには

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

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

Answer 2

単純！

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