JavaScriptを介してCSS：hover効果を無効にできますか？

99

:hoverJavaScriptを介して、ブラウザーがCSS の効果を使用できないようにしています。

JSが利用できない場合にホバー効果が必要なため、CSSでaとa:hoverスタイルを設定しました。しかし、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 jquery css

— めお
ソース

136

純粋な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');
)

— ポール・D・ウェイト
ソース

5

CSSが完全に外部ファイルに含まれている場合に機能し、CSSが最初にロードされてもJSが後でロードされない場合は、ページのロード中にも機能するため、このソリューションはnoscriptソリューションよりも優れています。jQueryを使用して「プログレッシブエンハンス」を行うと、読み込みが完了する前に何かをクリックすると、ページが正常に機能しないことがよくあります。高速リンクの高速ブラウザを使用しても、これはよく目にします。

— Shiny and New安宇

@氏。光沢があり、新しい：同意します。これは私のソリューションよりも好きです！なぜこのエレガンスに気づかなかったのか、よくわかりません...

— Josh

3

「CSSが完全に外部ファイルに含まれている場合に機能するため、noscriptソリューションよりもこのソリューションの方が好きです」— <noscript>ソリューションもそうです。<link>タグの<noscript>代わりに、内にタグを置くだけ<style>です。私のソリューションでは、複数のファイルではなく、1つのスタイルシートファイル内にすべてを保持できます。

— ポールD.ウェイト

それはまさに私が探していたものではありませんが、この解決策が最善の妥協案だと思います！Thxのすべて

— meo

同じスタイルを別の名前でコピーし、jqueryを使用してそのクラスのすべての要素を選択し、クラスを削除してコピークラスで置き換えることもできます。

— chepe263 2012

14

ホバーのみが割り当てられている2番目のクラスを使用します。

HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

これで、たとえば要素がクリックされた場合に、Jqueryを使用してクラスを削除できます。

JQUERY

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

この回答がお役に立てば幸いです。

— カイ・ノアック
ソース

3

プラス1.それは正統ではありませんが、非常に崇高な方法で問題を解決します。

— ジムトーラン

11

JavaScriptを使用して、スタイルシートとスタイルシートルール自体を操作できます。

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

属性を！importantにして、これを最後のCSS定義にすると、より明確にターゲットを指定しない限り、以前の定義をオーバーライドする必要があります。その場合は、さらにルールを挿入する必要があります。

— スティーブンP
ソース

1

または、すべてのnoscriptルールを1つのスタイルシートに入れて、JavaScriptからスタイルシートを無効にすることもできます。

— Sean Hogan

2

または、noscriptスタイルシート<link>タグを<noscript>要素内に配置しますか？それはうまくいくでしょう？

— ポールD.ウェイト

1

または、「問題のある」ルールを削除します：developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa

1

IE5でも実行できます。メソッドの呼び出し方は異なりますが、動作するはずです：msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx。私は他のブラウザをチェックしていませんが、すべての最新のブラウザが標準を実装していると思います。

— RoToRa 2010年

Firefoxの私には取得Error: The operation is insecure.

— アレックスW

11

これはaSeptikの回答に似ていますが、このアプローチはどうですか？JavaScriptを使用して無効にするCSSコードを<noscript>タグで囲みます。そうすれば、javaScriptがオフの場合はCSS :hoverが使用され、それ以外の場合はJavaScript効果が使用されます。

例：

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

— ジョシュ
ソース

4

not()CSS演算子とjQueryのaddClass()関数を使用しました。次に例を示します。リストアイテムをクリックすると、ホバーしなくなります。

例えば：

HTML

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

CSS

.vegies li:not(.no-hover):hover { color: blue; }

jQuery

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});

— 冷マグロ
ソース

3

CSSを使用して、：hoverイベントがリンクの外観を変更しないようにします。

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

この単純なCSSは、リンクが常に黒くなり、下線が引かれないことを意味します。見た目の変化だけがあなたがコントロールしたいものなのかどうか、私には質問からはわかりません。

— クリストファーアルトマン
ソース

JSがクライアントで使用できない場合、：hover効果があるのは良いことです。しかし、それが上書きされる必要がある場合。私はcssにa：hoverクラスを設定しましたが、それを無効にしたいだけです。

— meo

@meo：CSS疑似クラスを無効にすることはできませんが、すべてのリンクスタイルを同じ外観/パラメーターに設定することでオーバーライドできます。この答えと私の答えの両方が、ちょうど異なる方法でこれを行います。

— Mottie

3

デバイスがタッチをサポートしていることを検出したら、すべての:hoverプロパティを:activeに置き換えることをお勧めします。のようにこの関数を呼び出すだけですtouch()。

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}

— ショビット・シャルマ
ソース

私にとってはうまくいきます。ありがとう！

— 2018

1

リンクの色を設定してみてください：

$("ul#mainFilter a").css('color','#000');

編集：またはもっと良いことに、クリストファーが示唆したように、CSSを使用します

— モティ
ソース

jsfiddle.net/raPeX私は例を作りました。それは機能しますが、それをするのはそのような愚かですすべてのCSS値を取得してスタイルとして追加する必要がありますか？もっと良い方法があるはずです。やりたくない。ヒントに+1

— meo

こんにちはMeo、いいえ、上のコードは特定のリンクをターゲットにしていました。それがあなたが意味するものであるか、またはページ上のすべてのリンクが異なる色であると言っているかどうかのa代わりに単に使用することによってそれをより一般化することができul#mainFilter aますか？

— Mottie

：私は、私が何を意味するかをお見せするために、コメントで、あなたのデモを更新したjsfiddle.net/raPeX/2

— Mottie

iveありがとうございますしかし、問題は、ホバーで色が変わるだけでなく、背景と境界、さらには線の高さでさえあることです。そのため、ホバーを無効にして、ホバー効果をすべて上書きする方が簡単です。

— meo

このアイデアの部分的なパッチ：a.jsOverride:hoverすべてのcss特性をオーバーライドするために選択するcssルールを作成できます。そのため、jsはjsOverrideページが読み込まれたときにすべてのリンクにそのクラスを追加するだけで済みます...

— grossvogel

1

実際、これを解決する別の方法は、CSSをで上書きすることinsertRuleです。

CSSルールを既存/新しいスタイルシートに挿入する機能を提供します。私の具体的な例では、次のようになります。

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

私の4歳の元の例のデモ：http : //jsfiddle.net/raPeX/21/

— めお
ソース