web-dev-qa-db-ja.com

JavaScriptでホバーCSSプロパティを変更する

JavaScriptを使用してCSS：hoverプロパティを変更する方法を見つける必要があります。

たとえば、次のHTMLコードがあるとします。

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

そして、次のCSSコード：

table td:hover {
background:#ff0000;
}

JavaScriptを使用して、<td>ホバープロパティをたとえばbackground：＃00ff00に変更します。 JavaScriptを使用してスタイルの背景プロパティにアクセスできることを知っています。

document.getElementsByTagName("td").style.background="#00ff00";

しかし、私は：hoverに相当するJavaScriptを知りません。 JavaScriptを使用してこれらの<td>の：hover背景を変更するにはどうすればよいですか？

あなたの助けは大歓迎です！

javascripthtmlcssdhtml
70
Wagtail

:hoverのような疑似クラスは要素を参照しませんが、スタイルシートルールの条件を満たす要素を参照します。 スタイルシートルールを編集、新しいルールを追加、または新しい:hoverルールを含む新しいスタイルシートを追加する必要があります。

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);
85
kennebec

できない Javascriptを介して実際の:hoverセレクターを変更または変更します。ただし、 mouseenter を使用してスタイルを変更し、 mouseleave に戻すことができます（ありがとう、@ Bryan）。

33
Achal Dave

できることは、オブジェクトのクラスを変更し、異なるホバープロパティを持つ2つのクラスを定義することです。例えば：

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

そして、これは私が見つけた： JavaScriptで要素のクラスを変更する

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");
7
isgoed

目的に合っている場合は、cssを使用せずにJavaScriptでonmouseoverイベントを使用せずにホバー機能を追加できます。

これがコードスニペットです

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>
2
Namit Juneja

グローバル変数を宣言します：

var td

次に、すべてのモルモットを変更する場合は、<td>idでモルモットを選択します

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

トリガーする関数と、必要なすべてのtdを変更するループを作成します

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

CSSシートに移動します。

.yournewclass:hover { background-color: #00ff00; }

それだけです。これにより、CSSの所有権を直接変更する（CSSクラスを切り替える）ことにより、すべての<td>タグにbackground-color: #00ff00;を取得させることができます。

1
Gabriel Barberini

私は一度この必要があり、CSSドキュメントを維持するための小さなライブラリを作成しました

https://github.com/terotests/css

それであなたは述べることができます

css().bind("TD:hover", {
        "background" : "00ff00"
    });

上記の手法を使用し、クロスブラウザーの問題の処理も試みます。何らかの理由でIE9などの古いブラウザーが存在する場合、STYLEタグの数が制限されます。古いIEブラウザーには、ページで使用できるSTYLEタグの数にこの奇妙な制限があったためです。

また、タグを定期的に更新するだけで、タグへのトラフィックを制限します。アニメーションクラスを作成するための限定的なサポートもあります。

1
Tero Tolonen

これは実際にCSSをセルに追加するのではなく、同じ効果をもたらします。上記の他のものと同じ結果を提供する一方で、このバージョンは私にとってもう少し直感的ですが、私は初心者なので、それが価値があるものとしてそれを取る：

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

これには、強調表示する各セルのクラスを「hoverCell」に設定する必要があります。

1
elPastor

このページは7年遅すぎて申し訳ありませんが、この問題を解決するためのはるかに簡単な方法があります（ホバースタイルを任意に変更します）。

HTML：

<button id=Button>Button Title</button>

CSS：

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

JavaScript：

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');
0
David Spector

デバイスがタッチをサポートしていることを検出したら、すべての: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');
              }
            }
          }
        }
      }
    }
0
Shobhit Sharma