CSS Speech Bubble hover change color - html

Question

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

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

Answer 2

Here you go:
jsFiddle
just change:
#go-button:hover .bubble::after {
border-color: #ffffff;
background: #ffffff;
}
to:
#go-button:hover:after {
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ffffff;
}
No need to use class from same element that you used ID for hovering after.

Answer 3

Following the below instructions should fix the issue.
Remove
#go-button:hover .bubble:after {
border-color: #ffffff;
background: #ffffff;
}
Replace
.bubble:hover .bubble:after {
border-color: #fff;
background: transparent;
}
With
.bubble:hover::after {
border-color: #fff;
background: transparent;
}
Hope it helps