CSS擬似要素の後（遷移） - 私は上記このサンプルコードを有するホバリング

<!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>

に示すコンテンツを移行する方法。私は 'transition'を使ってテキストを ' - positive！'にしようとしています。スライド/表示に3秒かかります。しかし、それは動作していません..どのようにそれを修正するには？CSS擬似要素の後（遷移） - 私は上記このサンプルコードを有するホバリング

出典

2013-10-25 Anonymous

afterは、transitionの有効な値ではありません。

代わりにを:afterセレクタのプロパティとして指定します。

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

また、にホバー上の異なる遷移を持っているし、状態を置くことができます。これにより、擬似要素を表示するのに遅延がありますが、遅延を隠すことはできません。ここで

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

は擬似要素に遷移をサポートするブラウザのリストです： http://css-tricks.com/transitions-and-animations-on-css-generated-content/

出典

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

エイ最後の文に。最近のChromeのバージョンであっても、擬似要素の遷移を完全にサポートしていない可能性があります。最新のリリースは、tho :) – Terry

これは、うまく、ありがとうございます。 –

* hover *状態と* mouseout *状態で異なる遷移を持つこともできます。したがって、擬似要素を表示するには遅延がありますが、それを隠すための遅延はありません。このように：http://jsfiddle.net/davidpauljunior/vp8Pv/ – davidpauljunior

CSS擬似要素の後（遷移） - 私は上記このサンプルコードを有するホバリング

答えて

関連する問題