css - on:hover 影响选择器及其 :after 部分

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零件着色？

这是小提琴

Answer 1

您需要另一个规则来更改:after伪元素内的颜色 on :hover：

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

更新的小提琴