una - style.background javascript

Cambiar: desplaza las propiedades de CSS con JavaScript

Question

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, fondo: # 00ff00. Sé que podría acceder a la propiedad de fondo de estilo usando JavaScript como:

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

Pero no sé de un equivalente de JavaScript para: hover. ¿Cómo cambio estos <td> ''s: fondo emergente usando JavaScript?

¡Tu ayuda es muy apreciada!

Answer 1

Declare una var global

var td

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

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

Haga que se active una función y un bucle para cambiar todas las td ''s deseadas

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

Ve a tu hoja de CSS:

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

Y eso es todo, con esto puedes hacer que todas tus etiquetas <td> tengan un background-color: #00ff00; cuando está suspendido cambiando su propiedad css directamente (cambiando entre clases css).

Answer 2

En realidad, esto no agrega el CSS a la celda, pero da el mismo efecto. Si bien proporciona el mismo resultado que los 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 para "hoverCell".

Answer 3

Las clases pseudo como :hover nunca 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 regla de :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);

Answer 4

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

Answer 5

No can''t cambiar o alterar el selector de :hover actual :hover través de Javascript. Sin embargo, puede usar el mouseenter para cambiar el estilo y volver a mouseleave el mouseleave (gracias, @Bryan).

Answer 6

Recomendaría reemplazar todo :hover propiedades de :hover a :active cuando detecta que el dispositivo admite el toque. Simplemente llame a esta función cuando lo haga 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'');
              }
            }
          }
        }
      }
    }

Answer 7

Si se adapta a su propósito, puede agregar la funcionalidad hover sin usar css y usar el evento onmouseover 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>

Answer 8

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 trata de resolver 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 límite extraño 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 apoyo limitado para crear clases de animación.