CSS (Übergang) nach einer pseudo-Element - wie Inhalte zu überführen, die auf schweben zeigt

<!DOCTYPE html> 
<html> 
<head> 
<style> 

div 
{ 
transition:after 3s; 
-webkit-transition:after 3s; 
} 

div:hover:after 
{ 
content:"- positive!"; 
} 
</style> 
</head> 
<body> 

<div>Test</div> 

</body> 
</html>

I diesen Beispielcode oben haben. Ich versuche "Übergang" zu verwenden, so dass der Text: "- positiv!" dauert 3 Sekunden, um zu gleiten/zu zeigen. Aber es funktioniert nicht .. Wie es zu beheben?CSS (Übergang) nach einer pseudo-Element - wie Inhalte zu überführen, die auf schweben zeigt

Quelle

2013-10-25 Anonymous

after ist kein gültiger Wert von transition.

Statt transition als eine Eigenschaft der :after Selektor.

HTML

<div>Test</div>

CSS

div:after { 
    content:" - positive!"; 
    position: relative; 
    opacity: 0; 
    top: -20px; 
    -webkit-transition: all 3s; 
    transition: all 3s; 
} 
div:hover:after { 
    opacity: 1; 
    top: 0px; 
}

Demo

Sie auch einen anderen Übergang am schweben in und schweben klappten Zustand haben kann. Dies ermöglicht uns eine Verzögerung, um das Pseudo-Element anzuzeigen, aber keine Verzögerung, um es zu verbergen.

CSS

div:after { 
    content:" - positive!"; 
    position: relative; 
    opacity: 0; 
    top: -20px; 
    -webkit-transition: all 250ms; 
    transition: all 250ms; 
} 
div:hover:after { 
    opacity: 1; 
    top: 0px; 
    -webkit-transition: all 3s; 
    transition: all 3s; 
}

Demo

Hier ist eine Liste von Browsern, die Übergänge auf Pseudo-Elemente unterstützen: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

Quelle

2013-10-25 01:17:24 3dgoo

Aye auf der letzten Anweisung. Ich glaube sogar, die letzte (nicht die letzte) Version von Chrome nicht den vollen Unterstützung für Übergänge in pseudo-Elementen aufweist. Die neueste Version der Fall ist, tho :) – Terry

Dies macht den Job gut, danke. –

Sie können auch einen anderen Übergang auf dem * Hover * Zustand und den * * mouseout Zustand. Es gibt also eine Verzögerung, um das Pseudo-Element anzuzeigen, aber keine Verzögerung, um es zu verstecken. Wie folgt aus: http://jsfiddle.net/davidpauljunior/vp8Pv/ – davidpauljunior

CSS (Übergang) nach einer pseudo-Element - wie Inhalte zu überführen, die auf schweben zeigt

Antwort

Verwandte Themen