Warum überlappt sich der Hover-Effekt?

Question

Wenn ich den Mauszeiger über die Schaltfläche bewege, überlagert der Hover-Effekt das Symbol und die Beschriftung der Schaltfläche. Ich habe versucht, die Ebene des Symbols/Label divs über den Hover-Effekt zu verschieben, indem Sie z-index: 999; setzen und es funktioniert nicht.

HTML

<div class="service-wrapper"> 
    <div class="services"> 
     <a href="#"><div class="button"> 
      <img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn"> 
      <div class="serv-name">TECHNICAL SUPPORT</div> 
     </div></a> 
    </div> 
    <div class="services"> 
     <a href="#"><div class="button"> 
      <img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn"> 
      <div class="serv-name">CUSTOMER SERVICE</div> 
     </div></a> 
    </div> 
</div> 

CSS

.button { 
    height: 40px; 
    width: 230px; 
    margin: 10px; 
    padding: 5px; 
    padding-right: 15px; 
    padding-left: 15px; 
    border-radius: 5px; 
    background: #ffbb11; 
    text-align: center; 
    color: #000000; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: space-around; 
    overflow: hidden; 
    position: relative; 
} 

a { 
    text-decoration: none; 
} 

.button::before, 
.button::after { 
    background: rgba(255, 255, 255, 1.0); 
    content: ''; 
    position: absolute; 
} 

.button::after { 
    height: 70px; 
    left: -22%; 
    top: 0; 
    transform: skew(50deg); 
    transition-duration: 0.3s; 
    transform-origin: top; 
    width: 0; 
    z-index: 0; 
} 

.button:hover:after { 
    height: 60px; 
    width: 325px; 
} 

.iconBtn{ 
    max-height: 85%; 
    max-width: 85%; 
} 

img:hover: { 
    z-index: 999; 
} 

JSFIDDLE

Answer 1

Zum einen finden, an dem Ihr z-index:999 zum img:hover was bedeutet, dass Sie das Bild zu schweben haben, sich zu bewerben. Außerdem haben Sie eine zusätzliche : nach img:hover hinzugefügt, also war es wie img:hover:.

Darüber hinaus löst das Hinzufügen von z-index:999 zum Etikett tatsächlich das Problem. Das Ergebnis sehen Sie hier:

.button { 
 
\t height: 40px; 
 
\t width: 230px; 
 
    \t margin: 10px; 
 
    padding: 5px; 
 
\t padding-right: 15px; 
 
\t padding-left: 15px; 
 
\t border-radius: 5px; 
 
    background: #ffbb11; 
 
\t text-align: center; 
 
\t color: #000000; 
 
\t font-weight: bold; 
 
\t display: flex; 
 
    align-items: center; 
 
\t justify-content: space-around; 
 
\t overflow: hidden; 
 
    \t position: relative; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.button::before, 
 
.button::after { 
 
\t background: rgba(255, 255, 255, 1.0); 
 
\t content: ''; 
 
\t position: absolute; 
 
} 
 

 
.button::after { 
 
\t height: 70px; 
 
\t left: -22%; 
 
\t top: 0; 
 
\t transform: skew(50deg); 
 
    \t transition-duration: 0.3s; 
 
    \t transform-origin: top; 
 
\t width: 0; 
 
    \t z-index: 0; 
 
} 
 
.button:hover:after { 
 
\t height: 60px; 
 
\t width: 325px; 
 
} 
 
.iconBtn{ 
 
\t max-height: 85%; 
 
\t max-width: 85%; 
 
    z-index: 999; 
 
} 
 
.serv-name{ 
 
    z-index:999; 
 
}

<div class="service-wrapper"> 
 
    <div class="services"> 
 
     <a href="#"><div class="button"> 
 
      <img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn"> 
 
      <div class="serv-name">TECHNICAL SUPPORT</div> 
 
     </div></a> 
 
    </div> 
 
    <div class="services"> 
 
     <a href="#"><div class="button"> 
 
      <img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn"> 
 
      <div class="serv-name">CUSTOMER SERVICE</div>