[解決済み] hover(マウスを離した時)の反対語は何ですか?
2022-05-17 16:53:16
質問
の逆を行う方法はありますか?
:hover
だけを使って
CSS?というように
:hover
は
on Mouse Enter
に相当するCSSはありますか?
on Mouse Leave
?
例
リスト項目を使用したHTMLメニューがあります。項目のひとつにカーソルを合わせると、CSS のカラーアニメーションが
#999
から
black
. マウスがアイテム領域から離れるときに、どうすれば逆の効果を生み出すことができるでしょうか。
black
から
#999
?
(この例だけに答えたいわけではなく、この例と同じように
:hover
という問題です)。
どのように解決するのですか?
私の理解が正しければ、ホバー状態ではなくリンクに遷移させることで同じことができます。
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の定義は。
hover セレクタは、マウスオーバーしたときに要素を選択するために使用されます。 選択するために使用されます。
その定義によれば、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;
}
関連
-
[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために
-
[css3]ピュアCSS3によるネオンライト効果
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] hoverと反対のCSS擬似クラスはありますか?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか?
-
[解決済み] Chromeデベロッパーツールで:hoverの状態を見る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[css3]ピュアCSS3によるネオンライト効果
-
[Div+CSSチュートリアル】divの背景を透明にする設定例
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS