2017-11-20 15 views
0

Wenn ich den Mauszeiger über die Schaltfläche bewegt, funktioniert der Hover-Effekt der weißen Hintergrundfarbe außerhalb der Schaltfläche und die Überlaufeigenschaft funktioniert nicht. Die overflow: hidden; sollte den Effekt innerhalb der Schaltfläche anzeigen.Warum versteckt der Überlauf den Übergangseffekt nicht?

.button { 
 
    flex: 0 0 auto; 
 
    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; 
 
} 
 

 
.button::before, 
 
.button::after { 
 
    background: #fff; 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.button:hover { 
 
    color: #ffbb11; 
 
} 
 

 
.button::after { 
 
    height: 70px; 
 
    left: -8%; 
 
    top: 5; 
 
    transform: skew(50deg); 
 
    transition-duration: 0.6s; 
 
    transform-origin: top; 
 
    width: 0; 
 
} 
 

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

 
.iconBtn{ 
 
    max-height: 85%; 
 
    max-width: 85%; 
 
}
<div class="services"> 
 
     <a href="https://apply.sorensonvrs.com/secured_contact_support"><div class="button"><img src="http://beacon.svrs.com/asset/imgs/icon-techsup2.png" class="iconBtn"> 
 
     <div class="serv-name">TECHNICAL SUPPORT</div></div></a> 
 
       </div> 
 
     <div class="services"> 
 
      <a href="http://www.sorensonvrs.com/contact_customer_service"><div class="button"><img src="http://beacon.svrs.com/asset/imgs/icon-custserv2.png" class="iconBtn"> 
 
     <div class="serv-name">CUSTOMER SERVICE</div></div></a> 
 

 
     </div>

Siehe auf JSFIDDLE

+1

Ihr Einzug ist wirklich schlecht. Bitte repariere es. Ich werde mein Bestes geben, um Ihnen zu helfen, nachdem Sie es behoben haben. –

+0

Sie meinen, die Codes sind nicht in Reihenfolge? –

+0

@ChristianLuneborg Er spricht wahrscheinlich davon, dass in Ihrem HTML keines der Elemente miteinander in Einklang steht. –

Antwort

1

Sie einige code fehlt. Überprüfen Sie die fiddle. Sie sollten position: relative; in buttonclass hinzufügen. Hoffe das wird helfen! nicht verstehen, das Endprodukt Sie suchen wirklich

+0

Ja, das funktioniert. Die 'html {box-sizing: border-box;}' wurde nicht benötigt, also habe ich sie entfernt. Wenn es übergeht, verschwindet der schwarze Etikettentext, und Sie können es sogar durchsehen, es gibt kein CSS von 'opacity: 0;'? –

+0

Vergiss die "Opazität: 0;" Es war auf 'Hintergrund: rgba (255, 255, 255, 0.85);' - Danke! –

0

ich, aber Sie können versuchen, diese

.button::before, 
.button::after { 
    background: #fff; 
    content: ''; 
    position: relative; 

} 

relativ statt absolut

+0

Ihr Code hat nicht funktioniert. Der Effekt des weißen Hintergrunds animiert innerhalb des Knopfes, aber gegenwärtig, sein Anzeigen außerhalb des Knopfes. –

Verwandte Themen