0

私はcssでチャットバブルを作りました：

.bubble 
{
position: relative;
    left: 20%;
width: 250px;
height: 185px;
padding: 0px;
background: #FFFFFF;
border: #817F7F solid 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.bubble:after 
{
content: "";
position: absolute;
top: 16.36px;
left: -9px;
border-style: solid;
border-width: 7px 9px 7px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
}

泡と先のとがったものに色を付けたい:hover

.bubble:hover  {

background:yellow;    

}

を着色するだけで.bubble、。はありません.bubble:after。

パーツに色を付けるにはどうすればよい:afterですか？

ここにフィドルがあります

4

1 に答える 1

4

:after上の疑似要素内の色を変更するには、別のルールが必要です:hover。

.bubble:hover:after {
    border-color: transparent yellow;
}

更新されたフィドル

于 2013-01-03T13:29:57.857 に答える