Beniamino_Baggins Beniamino_Baggins - 5 months ago 42
HTML Question

CSS Speech Bubble hover change color

I'm using a css speech bubble generator to generate a speech bubble, but when I hover over the speech bubble, the speech bubble needs to change to be white. The little arrow bit that sticks out however is not changing to be white.

Code:

styling in the php code:

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


In a seperate stylesheet:

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


image of problem:

enter image description here

How come the arrow bit of the speech bubble is not changing to white when hovering over the #go-button div (the rectangular portion of the speech bubble is turning white when hovering - just not the arrow portion)?

Answer

Change this

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

to

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