Cambio: pasar el mouse por las propiedades de CSS con JavaScript

Necesito encontrar una manera de cambiar CSS: propiedades de desplazamiento usando JavaScript.

Por ejemplo, supongamos que tengo este código HTML:

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

Y el siguiente código CSS:

table td:hover {
background:#ff0000;
}

Me gustaría usar JavaScript para cambiar las propiedades de desplazamiento <td> a, por ejemplo, background: # 00ff00. sé que podría acceder a la propiedad de fondo de estilo usando JavaScript como:

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

Pero no conozco un equivalente de JavaScript para: hover. ¿Cómo cambio el fondo de estos <td>: hover usando JavaScript?

¡Tu ayuda es muy apreciada!

Las pseudoclases :hovernunca se refieren a un elemento, sino a cualquier elemento que satisfaga las condiciones de la regla de la hoja de estilo. Debe editar la regla de la hoja de estilo , agregar una nueva regla o agregar una nueva hoja de estilo que incluya la nueva :hoverregla.

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

usted puede cambiar o alterar el :hoverselector real a través de Javascript. Sin embargo, puede usar mouseenterpara cambiar el estilo y volver a mouseleaveencender (gracias, @Bryan).

Lo que puede hacer es cambiar la clase de su objeto y definir dos clases con diferentes propiedades de desplazamiento. Por ejemplo:

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

Y esto lo encontré en: Cambiar la clase de un elemento con 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");

Si se ajusta a su propósito, puede agregar la funcionalidad de desplazamiento sin usar css y usar el onmouseoverevento en javascript

Aquí hay un fragmento de código

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

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

Lamento encontrar esta página 7 años tarde, pero aquí hay una forma mucho más sencilla de resolver este problema (cambiando los estilos de desplazamiento de forma arbitraria):

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

Pregunta bastante antigua, así que pensé que agregaría una respuesta más moderna. Ahora que las variables CSS son ampliamente compatibles, se pueden usar para lograr esto sin la necesidad de eventos JS o!important .

Tomando el ejemplo del OP:

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

Ahora podemos hacer esto en el 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);
}

Y agregue el estado de desplazamiento usando javascript así:

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

Aquí hay un ejemplo de trabajo https://codepen.io/ybentz/pen/RwPoeqb

Recomendaría reemplazar todas las :hoverpropiedades :activecuando detecte que el dispositivo es compatible con el tacto. Simplemente llame a esta función cuando lo haga comotouch()

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

Tuve esta necesidad una vez y creé una pequeña biblioteca para, que mantiene los documentos CSS

https://github.com/terotests/css

Con eso puedes decir

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

Utiliza las técnicas mencionadas anteriormente y también intenta solucionar los problemas entre navegadores. Si por alguna razón existe un navegador antiguo como IE9, limitará el número de etiquetas STYLE, porque el navegador IE más antiguo tenía este extraño límite para el número de etiquetas STYLE disponibles en la página.

Además, limita el tráfico a las etiquetas actualizando las etiquetas solo periódicamente. También hay un soporte limitado para crear clases de animación.

Declare una var global:

var td

Luego seleccione su cerdo guiena <td>obteniéndolo por su id, si desea cambiarlos todos

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

Cree una función que se activará y un bucle para cambiar todos tdlos

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

Vaya a su hoja CSS:

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

Y eso es todo, con esto, puede hacer que todas sus <td>etiquetas obtengan una background-color: #00ff00;cuando se desplazan cambiando su propiedad css directamente (cambiando entre clases css).

En realidad, esto no está agregando el CSS a la celda, pero da el mismo efecto. Si bien proporciona el mismo resultado que otras anteriores, esta versión es un poco más intuitiva para mí, pero soy un novato, así que tómalo por lo que vale:

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

Esto requiere configurar la Clase para cada una de las celdas que desea resaltar en "hoverCell".

Puede crear una variable CSS y luego cambiarla en JS.

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

para cambiarlo en JS, hice estas pequeñas funciones útiles:

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

y

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

Puedes crear tantas variables CSS como quieras, y no he encontrado ningún error en las funciones; Después de eso, todo lo que tienes que hacer es incrustarlo en tu CSS:

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

¡Y luego bam, una solución que solo requiere algunas funciones CSS y 2 JS!

Puede usar los eventos del mouse para controlar como hover. Por ejemplo, el siguiente código se hace visible cuando coloca el cursor sobre ese elemento.

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

Si usa html ux lang ligero, consulte aquí un ejemplo , escriba:

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

El código anterior ejecuta la metaetiqueta css: hover.