悬停在“后”的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

您可以将您的：悬停样式应用于父元素，因为：当您将鼠标悬停在箭头上后，它将触发悬停在父级上。

params

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

因此，您唯一的选择是将 :hover 放在父元素上。这样两个元素都会受到影响，不需要采取进一步的行动：

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

您可以查看jsFiddle here的更新后的工作版本。