反対のことをする方法はありますか？:hover のみ使用CSS ですか? たとえば、:hoverが の場合on Mouse Enter、 に相当する CSS はありますかon Mouse Leave?
例：
リスト項目を使用した HTML メニューがあります。項目の 1 つにマウスを移動すると、 から までの CSS カラー アニメーションが表示されます#999。マウスが項目領域から離れたときに、 からまでblackのアニメーションで逆の効果を作成するにはどうすればよいでしょうか。black#999
(この例だけではなく、「反対の」問題全体に答えたいということを覚えておいてください:hover。)
ベストアンサー1
私の理解が正しければ、遷移をホバー状態ではなくリンクに移動することで同じことを行うことができます。
ul li a {
color:#999;
transition: color 0.5s linear; /* vendorless fallback */
-o-transition: color 0.5s linear; /* opera */
-ms-transition: color 0.5s linear; /* IE 10 */
-moz-transition: color 0.5s linear; /* Firefox */
-webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
color:black;
cursor: pointer;
}
http://jsfiddle.net/spacebeers/sELKu/3/
ホバーの定義は次のとおりです。
:hover セレクターは、マウスを要素の上に置いたときに要素を選択するために使用されます。
この定義によれば、ホバーの反対はマウスがないそれをやり遂げる。私よりはるかに賢い人がこの記事を書いて、両方の状態に異なる遷移を設定している -http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}