CSS语音泡沫悬停改变颜色

Question

我正在使用css语音气泡生成器来生成语音气泡，但是当我将鼠标悬停在语音气泡上时，语音气泡需要变为白色。然而，伸出的小箭头不会变成白色。

代码：

php代码中的样式：

<style>
.bubble 
{
position: relative;
width: 250px;
height: 65px;
padding: 0px;
background: #ff8282;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ff8282;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -24px;
top: 50%;
}

#go-button:hover .bubble:after {
      border-color: #ffffff;
      background: #ffffff;
}

.bubble:hover {
      border-color: #ffffff;
      background: #ffffff;
}
.bubble:hover .bubble:after {
      border-color: #ffffff;
      background: #ffffff;
}
</style>

HTML：

            <div  type="submit"
                value="GO"
                id="go-button"
                class="bubble">
            </div>

在单独的样式表中：

#go-button,
#add-go-button,
#show-shops-button,
#show-comments-button,
#edit-product-button {
  font: 200 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 100%;
  background-color: #ff8282;
  padding: 12px;
  border: 0px solid #fff;
  color: #fff;
  cursor: pointer;
}
#go-button h5,
#add-go-button h5 {
  font-size: 16px;
  font-weight: 200;
}
#go-button:hover,
#add-go-button:hover,
#try-now-button:hover {
  text-decoration: none;
  background-color: #fff;
  color: #fc4747;
}

问题形象：

当鼠标悬停在＃go-button div上时，讲话气泡的箭头位置是否变为白色（当悬停时，气泡的矩形部分变为白色 - 只是不是箭头部分）？

Answer 1

更改此

#go-button:hover .bubble:after {
      border-color: transparent #ffffff;
}

到

#go-button.bubble:hover:after {
      border-color: transparent  #ffffff;
}

Answer 2

你走了：

jsFiddle

只需更改：

#go-button:hover .bubble::after {
      border-color: #ffffff;
      background: #ffffff;
}

以

#go-button:hover:after {
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ffffff;
}

无需使用您使用ID进行悬停的同一元素中的类。

Answer 3

按照以下说明解决问题。

删除

#go-button:hover .bubble:after {
      border-color: #ffffff;
      background: #ffffff;
}

替换

.bubble:hover .bubble:after {
      border-color: #fff;
      background: transparent;
}

。通过

.bubble:hover::after {
      border-color: #fff;
      background: transparent;
}

希望有所帮助