Changement:propriétés CSS avec JavaScript

vous can't modifier ou modifier le sélecteur :hover par Javascript. Vous pouvez, cependant, utiliser mouseenter pour changer le style, et revenir sur mouseleave (merci, @Bryan).

Ce que vous pouvez faire est de changer la classe de votre objet et de définir deux classes différentes passez propriétés. Par exemple:

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

et j'ai trouvé ça sur: modifier la classe D'un élément avec 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 cela vous convient, vous pouvez ajouter la fonctionnalité hover sans utiliser css et en utilisant l'événement onmouseover en javascript

voici un extrait de code

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

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

j'ai eu ce besoin une fois et j'ai créé une petite bibliothèque pour, qui maintient les documents CSS

https://github.com/terotests/css

avec ça vous pouvez déclarer

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

il utilise les techniques mentionnées ci-dessus et tente également de prendre en charge les questions cross-browser. S'il existe pour une raison quelconque un vieux navigateur comme IE9 il limitera le nombre d'étiquettes de STYLE, parce que L'ancien IE navigateur avait cette limite étrange pour le nombre d'étiquettes de STYLE disponibles sur la page.

en outre, il limite le trafic vers les tags en mettant à jour les tags que périodiquement. Il y a aussi un support limité pour la création de classes d'animation.

Déclarer un mondial var:

var td

puis sélectionnez votre guiena pig <td> obtenir par son id , si vous voulez changer tous les Alors

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

faire une fonction pour être déclenché et une boucle pour changer tout votre souhaité td 's

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

allez à votre feuille CSS:

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

et c'est tout, avec cela vous pouvez faire tout votre Les étiquettes <td> obtiennent un background-color: #00ff00; lorsqu'elles sont en vol stationnaire en changeant directement leur propriété css (commutation entre les classes css).

il ne s'agit pas en fait d'ajouter le CSS à la cellule, mais d'obtenir le même effet. Tout en fournissant le même résultat que les autres ci-dessus, cette version est un peu plus intuitive pour moi, mais je suis un novice, alors prenez-le pour ce qu'il vaut:

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

cela nécessite de définir la classe pour chacune des cellules que vous voulez mettre en évidence à"hoverCell".

je recommande de remplacer toutes les propriétés :hover par :active quand vous détectez que l'appareil supporte le toucher. Il suffit d'appeler cette fonction lorsque vous le faites comme 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');
              }
            }
          }
        }
      }
    }