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


93

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!

Respuestas:


110

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

1
Si está tomando esta ruta, este artículo también puede ayudar en el futuro.
Achal Dave

14
: hover es una pseudo-clase , no un pseudo-elemento. Los pseudo-elementos comienzan con dos puntos dobles, por ejemplo: después. / nitpick
Benji XVI

1
@Andi No, porque la stylevariable en la respuesta de kennebec es un nuevo elemento creado en el código y no apunta a una <style>etiqueta existente en el HTML.
Adaline Simonian

3
¿Por qué se desconoce si el nuevo styleelemento ya tiene una hoja de estilo o no?
GreenAsJade

1
¿Cómo buscaría y editaría una regla de hoja de estilo actual para cambiarla? Esto muestra cómo agregar una nueva regla, pero ¿qué pasa si ya existe una regla y es solo un valor que se está cambiando?
GreenAsJade

44

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


5
Realmente NO hay forma de cambiar el selector: hover con JavaScript?
sissypants

5
Tenga en cuenta que también necesitará enlazar mouseleavepara revertir los efectos.

1
He estado usando esto en proyectos anteriores e incluso probé la respuesta aceptada recientemente, pero esta siempre prevalece cuando se trata de usar elementos flotantes / activos con botones de colores. Solo quiero agradecer por publicar esto como una opción.
Jester

10

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

¿No puede usar element.classList de alguna manera para establecer la clase que tiene los estilos de desplazamiento deseados?
David Spector

6

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>

2
¡Esto mantendrá el nuevo estilo y no volverá al anterior!
Yahya

1
@Yahya: puede revertir este color en el evento de mouse out.
Andrei Volgin

6

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

4

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


3

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

2

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.


2

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


Acabo de aplicar este modelo en mi sitio web SoloLearn playrground, compruébelo usted mismo y vea cómo funciona: code.sololearn.com/WEtMpJ0mwFAD/#js
Gabriel Barberini

2

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".


1

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!


0

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

-1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.