[解決済み] CSSの:hover効果をJavaScriptで無効にすることはできますか?
2022-11-14 07:09:18
質問
私は、ブラウザが
:hover
のようなCSSの効果を、JavaScriptで実現しようとしています。
を設定したのですが
a
と
a:hover
というスタイルに変更しました。これは、JSが利用できない場合、ホバー効果が欲しいからです。しかし、もしJS
が
が利用可能な場合、私はCSSのホバー効果をより滑らかなもので上書きしたい(たとえば、jQuery colorプラグインを使用します)。
私はこれを試してみました。
$("ul#mainFilter a").hover(
function(e){ e.preventDefault(); ...do my stuff... },
function(e){ e.preventDefault(); ...do my stuff... });
また、試しに
return false;
でも試してみましたが、うまくいきません。
以下は、私の問題の例です。 http://jsfiddle.net/4rEzz/ . リンクはグレーにならずに消えていくはずです。
fudgey が言及したように、回避策は
.css()
を使ってリセットすることもできますが、CSS で指定されたすべてのプロパティを上書きする必要があります (こちらを参照してください。
http://jsfiddle.net/raPeX/1/
). 私は一般的な解決策を探しています。
誰かこれを行う方法を知っていますか?
PS:私はホバーのために設定したすべてのスタイルを上書きしたくありません。
どのように解決するのですか?
純粋なJavaScriptの汎用的な解決策はありません、残念ですが。JavaScriptはCSSの
:hover
の状態そのものをオフにすることはできません。
しかし、次の代替回避策を試すことができます。HTML と CSS に少し手を加えても構わないのであれば、JavaScript を使用してすべての CSS プロパティを手動でリセットする手間を省くことができます。
HTML
<body class="nojQuery">
CSS
/* Limit the hover styles in your CSS so that they only apply when the nojQuery
class is present */
body.nojQuery ul#mainFilter a:hover {
/* CSS-only hover styles go here */
}
JavaScript
// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.
$(function(){}
$('body').removeClass('nojQuery');
)
関連
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] JavaScriptでクエリ文字列の値を取得するにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトを表示するにはどうすればよいですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] Promise : then vs then + catch [重複].
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?