Ändern: Bewegen Sie den Mauszeiger über CSS-Eigenschaften mit JavaScript

Ich muss einen Weg finden, um CSS: Hover-Eigenschaften mit JavaScript zu ändern.

Angenommen, ich habe diesen HTML-Code:

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

Und der folgende CSS-Code:

table td:hover {
background:#ff0000;
}

Ich möchte JavaScript verwenden, um die <td> -Hover-Eigenschaften beispielsweise in den Hintergrund zu ändern: # 00ff00. Ich weiß, dass ich mit JavaScript auf die Style-Hintergrundeigenschaft zugreifen kann:

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

Aber ich kenne kein JavaScript-Äquivalent für: hover. Wie ändere ich den Hintergrund dieser <td>: Hover mithilfe von JavaScript?

Ihre Hilfe wird gerne in Anspruch genommen!

Pseudoklassen wie :hoverbeziehen sich niemals auf ein Element, sondern auf ein Element, das die Bedingungen der Stylesheet-Regel erfüllt. Sie müssen die Stylesheet-Regel bearbeiten , eine neue Regel anhängen oder ein neues Stylesheet hinzufügen, das die neue :hoverRegel enthält.

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);

Sie können den tatsächlichen :hoverSelektor nicht über Javascript ändern . Sie können jedoch mouseenterden Stil ändern und wieder mouseleaveaktivieren (danke, @Bryan).

Sie können die Klasse Ihres Objekts ändern und zwei Klassen mit unterschiedlichen Hover-Eigenschaften definieren. Beispielsweise:

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

Und das fand ich unter: Ändern Sie die Klasse eines Elements mit 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");

Wenn es Ihrem Zweck entspricht, können Sie die Hover-Funktionalität hinzufügen, ohne CSS und das onmouseoverEreignis in Javascript zu verwenden

Hier ist ein Code-Snippet

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

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

Es tut uns leid, diese Seite 7 Jahre zu spät zu finden, aber hier ist eine viel einfachere Möglichkeit, dieses Problem zu lösen (Hover-Stile willkürlich ändern):

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');

Ich würde empfehlen, alle :hoverEigenschaften zu ersetzen , :activewenn Sie feststellen, dass das Gerät Touch unterstützt. Rufen Sie diese Funktion einfach auf, wenn Sie dies tuntouch()

   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');
              }
            }
          }
        }
      }
    }

Ziemlich alte Frage, also dachte ich mir, ich werde eine modernere Antwort hinzufügen. Nachdem CSS-Variablen weitgehend unterstützt werden, können sie verwendet werden, um dies zu erreichen, ohne dass JS-Ereignisse oder erforderlich sind !important.

Am Beispiel des OP:

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

Wir können dies jetzt im CSS tun:

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

Und fügen Sie den Schwebezustand mit Javascript wie folgt hinzu:

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

Hier ist ein Arbeitsbeispiel https://codepen.io/ybentz/pen/RwPoeqb

Ich hatte dieses Bedürfnis einmal und erstellte eine kleine Bibliothek für, die die CSS-Dokumente verwaltet

https://github.com/terotests/css

Damit können Sie angeben

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

Es verwendet die oben genannten Techniken und versucht auch, die browserübergreifenden Probleme zu beheben. Wenn aus irgendeinem Grund ein alter Browser wie IE9 vorhanden ist, wird die Anzahl der STYLE-Tags begrenzt, da der ältere IE-Browser diese seltsame Begrenzung für die Anzahl der auf der Seite verfügbaren STYLE-Tags hatte.

Außerdem wird der Datenverkehr auf die Tags begrenzt, indem die Tags nur regelmäßig aktualisiert werden. Es gibt auch eine eingeschränkte Unterstützung für das Erstellen von Animationsklassen.

Deklarieren Sie eine globale Variable:

var td

Wählen <td>Sie dann Ihr Guiena-Schwein aus id, wenn Sie alle ändern möchten

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

Machen Sie eine Funktion ausgelöst werden und eine Schleife alle gewünschten Änderungen td‚s

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

Gehen Sie zu Ihrem CSS-Blatt:

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

Und das ist es, mit diesem können Sie alle Ihre <td>Tags background-color: #00ff00;beim Schweben bewegen, indem Sie die CSS-Eigenschaft direkt ändern (zwischen CSS-Klassen wechseln).

Dies fügt der Zelle nicht das CSS hinzu, sondern bewirkt den gleichen Effekt. Diese Version liefert zwar das gleiche Ergebnis wie andere oben, ist aber für mich etwas intuitiver, aber ich bin ein Anfänger. Nehmen Sie sie also für das, was es wert ist:

$(".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;
    });
});

Dazu muss die Klasse für jede der Zellen, die Sie hervorheben möchten, auf "hoverCell" gesetzt werden.

Sie können eine CSS-Variable erstellen und diese dann in JS ändern.

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

Um es in JS zu ändern, habe ich diese praktischen kleinen Funktionen erstellt:

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

und

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

Sie können so viele CSS-Variablen erstellen, wie Sie möchten, und ich habe keine Fehler in den Funktionen gefunden. Danach müssen Sie es nur noch in Ihr CSS einbetten:

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

Und dann bam, eine Lösung, die nur einige CSS- und 2 JS-Funktionen erfordert!

Wenn Sie leichtes HTML ux lang verwenden, überprüfen Sie hier ein Beispiel , schreiben Sie:

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

Der obige Code führt das Metatag css: hover aus.