CSS Speech Bubble Hover Farbe ändern

Question

Ich benutze eine CSS-Sprechblase Generator, um eine Sprechblase zu generieren, aber wenn ich über die Sprechblase schweben, muss die Sprechblase ändern, um weiß zu sein. Das kleine Pfeilchen, das herausragt, ändert sich jedoch nicht zu weiß.

Code:

Styling in dem 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 einem separaten Sheet:

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

Bild Problem:

Wie kommt der Pfeil Bit der Sprechblase nicht weiß ändert, wenn sie über die # Go-Taste div schweben (der rechteckige Abschnitt der Sprechblase weiß dreht, wenn schweben - nur nicht auf den Pfeil Teil)

Answer 1

Ändern Sie diese

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

zu

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

Answer 2

Hier gehen Sie:

jsFiddle

nur ändern:

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

zu:

#go-button:hover:after { 
border-style: solid; 
border-width: 15px 0 15px 24px; 
border-color: transparent #ffffff; 
} 

Keine Notwendigkeit Klasse von demselben Elemente zu verwenden, die Sie ID nach für Schweben verwendet.

Answer 3

Die folgenden Anweisungen sollten das Problem beheben.

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

.bubble:hover .bubble:after { 
     border-color: #fff; 
     background: transparent; 
} 

Mit

.bubble:hover::after { 
     border-color: #fff; 
     background: transparent; 
} 

ersetzen entfernen, es hilft