142

CSS:hover のみを使用するのとは逆の方法はありますか? のように::hoverがの場合on Mouse Enter、に相当する CSS はありon Mouse Leaveますか?

例：

リスト項目を使用した HTML メニューがあります。項目の 1 つにカーソルを合わせると、 から までの CSS カラー アニメーションが表示#999されblackます。blackからへのアニメーションで、マウスがアイテム領域を離れたときに反対の効果を作成するにはどうすればよい#999ですか?

jsフィドル

(この例だけに答えたいのではなく、「反対」の問題全体に答えたいと思います:hover。)

4

11 に答える 11

33

アニメーションの代わりにCSS トランジションを使用してください。

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

ライブデモ

于 2012-06-12T10:52:54.143 に答える
4

いいえ、CSS にはマウス リーブの明示的なプロパティはありません。

問題のアイテムを除く他のすべての要素で :hover を使用して、この効果を実現できます。しかし、それがどれほど実用的かはわかりません。

JS / jQuery ソリューションを検討する必要があると思います。

于 2012-06-12T10:52:04.987 に答える
2

CSS3トランジションを使用できます

いくつかの良いリンク:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

于 2012-06-12T11:00:49.867 に答える
1

ここでの回答で十分ですが、この問題に関するW3Schools の例は非常に簡単だと思います((私にとって) 混乱はすぐに解消されました)。

セレクターを使用して:hover、マウスをボタンの上に移動したときにボタンのスタイルを変更します。

ヒント: transition-duration プロパティを使用して、「ホバー」効果の速度を決定します。

例

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

要約すると、「入る」アニメーションと「出る」アニメーションを同じにしたいトランジションで.buttonは、ホバー セレクターではなく、メイン セレクターでトランジションを採用する必要があります.button:hover。「入る」アニメーションと「出る」アニメーションを異なるものにするトランジションでは、異なるメイン セレクターとホバー セレクター トランジションを指定する必要があります。

于 2016-09-28T04:37:01.270 に答える
0

の反対は の:hoverよう:linkです。

（編集：4つのセレクターがあるため、技術的には反対ではありません:link、:visited、:hoverおよび:active。含める場合は5つ:focus。）

たとえば.button:hover{ text-decoration:none }、ボタンの下線を削除するルールを定義すると、一部のブラウザーでボタンをロールオフすると下線が表示されます。これを修正しました.button:hover, .button:link{ text-decoration:none }

もちろん、これは実際にリンクである要素に対してのみ機能します（href属性があります）

于 2015-07-07T02:42:20.053 に答える