on：悬停以影响选择器及其：部分之后

Question

我用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部分着色？

here is fiddle

Answer 1

您需要另一条规则来更改:after上:hover伪元素中的颜色：

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

Updated fiddle