BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 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');
)

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します