上：悬停影响选择和它的：一部分

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