Kann nicht erhalten: nach Übergang zur Arbeit

Ich kann nicht scheinen, um die Opazität Übergang zu einem arbeiten nach Pseudo-Element, aber der gleiche Übergang auf das: vor Element funktioniert einwandfrei. Jede Hilfe wird geschätzt!Kann nicht erhalten: nach Übergang zur Arbeit

.top-nav li a:hover:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
} 

.top-nav li a:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
    position: absolute; 
} 

.top-nav li a:hover:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
} 

.top-nav li a:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
}

Quelle

2017-11-18 CMYKey

In meinen Tests Ihre CSS beides: vor und: nach Übergängen arbeiten. Es muss ein anderer Faktor im Spiel sein. Eine Möglichkeit besteht darin, dass die benachbarte Schaltfläche auf einem höheren Z-Index positioniert ist und den: nach Inhalt verdeckt. Können Sie einen reduzierten Testfall erstellen, der den Fehler reproduziert? Es wäre hilfreich, das CSS zu sehen, das das Navigationslayout steuert, und Ihr HTML-Markup. –

Hier ist eine Geige, die die überlappende Möglichkeit demonstriert, die ich in meinem vorherigen Kommentar beschrieben habe: https://jsfiddle.net/k9euprr4/ Beachten Sie, wie die 3. und 4. Liste ihre Nachbarn verdecken. Das: Nachdem Pseudo-Content noch da ist, ist er nur hinter dem Nachbar-Button versteckt. –

es funktioniert versuchen Breite li zu geben, dann wird es angezeigt

.top-nav li a:hover:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
    margin-left: 10px; 
 
    
 
} 
 

 
.top-nav li a:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-left: 10px; 
 
    position: absolute; 
 
} 
 

 
.top-nav li a:hover:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav li a:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav { 
 
    list-style: none; 
 
} 
 
.top-nav li { 
 
    float: left; 
 
    position: relative; 
 
    background:white; 
 
    width:85px; 
 
    text-align:center; 
 
}

<ul class="top-nav"> 
 
<li><a href="#">One</a></li> 
 
<li><a href="#">Two</a></li> 
 
<li><a href="#">Three</a></li> 
 
<li><a href="#">Four</a></li> 
 
</ul>

Quelle

2017-11-18 04:09:30 Gattbha

Kann nicht erhalten: nach Übergang zur Arbeit

Antwort

Verwandte Themen