CSS样式整个元素的“后”

代码：

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

当悬停在第Ë泡沫：

然而，当我将鼠标悬停在小箭头它不会导致整个按钮来改变颜色：

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

这里是jsfiddle

来源

2016-07-16 BeniaminoBaggins

，请复制粘贴你的CSS或更好，但创建一个小提琴。 –

@YasinYaqoobi我只是将jsfiddle添加到问题的底部。谢谢 – BeniaminoBaggins

删除＃go-button：悬停按预期工作 - https://jsfiddle.net/Nagasai_Aytha/o3pbu7hj/2/ –

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

#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>

来源

2016-07-16 02:32:30

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

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

所以，你唯一的选择就是把:hover在父元素上。这样，两个元素都将受到影响，并没有进一步的行动，将需要：

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

你可以看看你的jsfiddle here的更新，工作版本。

来源

2016-07-16 02:12:49

This works too。谢谢:) – BeniaminoBaggins

很高兴帮助@Beniamino_Baggins。 –

CSS样式整个元素的“后”

回答

相关问题