CSS Speech Bubble hover change color
<p>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. </p>

<p>Code:</p>

<p>styling in the php code:</p>

<pre><code>&lt;style&gt;
.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;
}
&lt;/style&gt;
</code></pre>

<p>html:</p>

<pre><code>            &lt;div  type="submit"
                value="GO"
                id="go-button"
                class="bubble"&gt;
            &lt;/div&gt;
</code></pre>

<p>In a seperate stylesheet:</p>

<pre><code>#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;
}
</code></pre>

<p>image of problem:</p>

<p><a href="https://i.stack.imgur.com/92Bvo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/92Bvo.png" alt="enter image description here"></a></p>

<p>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)?</p>