3 
<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/

我在创建箭头后使用，但是当我将鼠标悬停在框上时，箭头背景没有改变？悬停在框上时如何更改箭头的背景？谢谢

4

2 回答 2

4

箭头是由 :after 伪元素的边框制成的，因此要更改该颜色，请使用

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

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

于 2012-11-13T04:14:27.340 回答
2

简单的！

#box:hover:after {
    border-top-color: blue;
}
于 2012-11-13T04:14:59.600 回答