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背景を変更するにはどうすればよいですか？

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

のような疑似クラス: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);

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

できることは、オブジェクトのクラスを変更し、ホバープロパティが異なる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");

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

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

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

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

このページを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');

かなり古い質問なので、もっと現代的な答えを追加しようと思いました。CSS変数が広くサポートされるようになったため、JSイベントを必要とせずにこれを実現するために使用できます。!important。

OPの例をとると：

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

これをCSSで実行できるようになりました。

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

そして、次のようにjavascriptを使用してホバー状態を追加します。

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

これが実際の例ですhttps://codepen.io/ybentz/pen/RwPoeqb

デバイスがタッチをサポートしていることを検出: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');
              }
            }
          }
        }
      }
    }

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

https://github.com/terotests/css

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

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

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

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

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

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;ときにすべてのタグを取得することができます。

これは実際には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」に設定する必要があります。

CSS変数を作成し、JSで変更することができます。

:root {
  --variableName: (variableValue);
}

JSで変更するために、次の便利な小さな関数を作成しました。

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

そして

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

CSS変数はいくつでも作成できますが、関数にバグは見つかりませんでした。その後、あなたがしなければならないのはあなたのCSSにそれを埋め込むことです：

table td:hover {
  background: var(--variableName);
}

そして、bam、いくつかのCSSと2つのJS関数を必要とするソリューションです！

マウスイベントを使用して、ホバーのように制御できます。たとえば、次のコードは、その要素にカーソルを合わせると表示されます。

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

軽量のhtmlux langを使用している場合は、ここで例を確認し、次のように記述します。

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

上記のコードは、css：hoverメタタグを実行します。