MouseOverとMouseOut CSSの場合

Question

マウスを1つの要素に使用する場合は、:hover CSS属性を使用します。要素からマウスを出すのはどうですか？

色を変更する要素にトランジション効果を追加しました。ホバー効果はうまく機能しますが、効果を適用するためにマウスのアウトに使用するCSSの属性は何ですか？ JavaScriptソリューションやJQueryソリューションではなく、CSSソリューションを探しています。あなたが唯一の要素のうち、あなたのマウス、それはそれに戻りますと、:hoverが必要

Answer 1

これは最適な解決策です。

CSS onomouseout：

div:not(:hover){ ... } 

のonmouseover CSS：

div:hover{ ... } 

あなたはONLYれるonmouseoutいくつかのスタイルを設定する必要があり、このような方法でこれを実行しようとしている場合ので、それは良いでしょう

div { ... } 

あなたのスタイルを設定し、onmouseoverにもなります。

Answer 2

は、デフォルトの非です：このように、状態をホバー：

.class { color: black; } 
.class:hover { color: red; } 

をあなたは置くと、色が赤になります「マウス出力」すると、:hoverセレクタと一致しないため、色は黒に戻ります。これはすべてのブラウザのデフォルトの動作です。ここで行う必要は特にありません。

Answer 3

CSS自体はmouseinまたはmouseoutセレクタをサポートしていません。

:hoverセレクタは、マウスが上にあるときに要素に適用され、マウスが入るときにスタイルが追加され、マウスが離れるときにスタイルを追加します。

最も近いアプローチは、デフォルトの（非ホバー）スタイル内でmouseoutに配置するスタイルを定義することです。エレメントにマウスオーバーすると、hoverのスタイルが有効になり、mouseinをエミュレートし、エレメントからマウスを離したときに、デフォルトのスタイルが再び有効になり、mouseoutをエミュレートします。ここ

はhereから採取example、ある：

div { 
    background: #2e9ec7; 
    color: #fff; 
    margin: 0 auto; 
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in; 
    -moz-transition: -moz-border-radius 0.5s ease-in; 
    -o-transition: border-radius 0.5s ease-in; 
    -ms-transition: border-radius 0.5s ease-in; 
    transition: border-radius 0.5s ease-in; 
    text-align: center; 
    width: 200px; 
} 


div:hover { 
    background: #2fa832; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform: rotate(720deg); 
    -moz-transform: rotate(720deg); 
    -o-transform: rotate(720deg); 
    -ms-transform: rotate(720deg); 
    transform: rotate(720deg); 
} 

div:hover

スタイルのために定義されtransition Sは、マウスが入ったときに有効になり（及びhoverが適用されます）。 divスタイルのtransitionは、マウスが離れると有効になります（hoverが削除されます）。これにより、mouseinとmouseoutの遷移が異なります。

Answer 4

私は解決策を見つけたと思います。

.class :hover { 
    /*add your animation of mouse enter*/ 
} 

.class { 
    /* 
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out 
    */ 
} 

ちょうどそれを試してみてください... :)