悬停在其“之后”时，css样式整个元素

Question

我有这个按钮/语音泡沫：

码：

<div value="GO" id="go-div" class="bubble">
   <input type="submit" value="GO" id="go-button" style="    position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;" data-target="#search-results-page">
</div>

将鼠标悬停在按钮上时，我可以使用这种样式来更改小箭头的颜色：

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

将鼠标悬停在气泡上时会产生以下效果：

但是，当我将鼠标悬停在小箭头上时，不会导致整个按钮改变颜色：

选择小箭头（ .bubble:after ）悬停并影响整个按钮（ .button ）将其变成白色的CSS是什么？

这是jsfiddle

Answer 1

您可以将：hover样式应用于父元素，由于：after是子元素，当您将鼠标悬停在箭头上时，它将触发对父元素的悬停。

#go-div:hover #go-button{
  background: white;
}

 .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-div.bubble:hover:after { border-color: transparent #ffffff; } #go-button:hover { text-decoration: none; background-color:white; color: brand-red } #go-button, #go-div{ 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-div:hover #go-button{ background: white; } 

 <div value="GO" id="go-div" class="bubble"> <input type="submit" value="GO" id="go-button" style=" position: absolute; width: 100%; height: 100%; top: 0; left: 0;" data-target="#search-results-page"> </div> 

Answer 2

您不能使用.bubble:hover:after来选择整个气泡，如下所示：

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

因此，唯一的选择是将:hover放在父元素上。 这样，这两个要素都将受到影响，并且无需采取进一步措施：

.bubble:hover > #go-button {
    background: #ffffff;
}

您可以在此处查看jsFiddle的更新的工作版本。