Changement: survolez les propriétés CSS avec JavaScript

J'ai besoin de trouver un moyen de changer CSS: les propriétés de survol en utilisant JavaScript.

Par exemple, supposons que j'ai ce code HTML:

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

Et le code CSS suivant:

table td:hover {
background:#ff0000;
}

Je voudrais utiliser JavaScript pour changer les propriétés de survol <td> en, par exemple, background: # 00ff00. je sais que je pourrais accéder à la propriété d'arrière-plan de style en utilisant JavaScript comme:

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

Mais je ne connais pas d'équivalent JavaScript pour: hover. Comment modifier l'arrière-plan de ces <td>: hover à l'aide de JavaScript?

Votre aide est grandement appréciée!

Les pseudo-classes comme :hoverne font jamais référence à un élément, mais à tout élément qui satisfait aux conditions de la règle de la feuille de style. Vous devez modifier la règle de feuille de style , ajouter une nouvelle règle ou ajouter une nouvelle feuille de style qui inclut la nouvelle :hoverrègle.

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

Vous ne pouvez pas changer ou modifier le :hoversélecteur réel via Javascript. Vous pouvez, cependant, utiliser mouseenterpour changer le style et revenir en arrière mouseleave(merci, @Bryan).

Ce que vous pouvez faire, c'est changer la classe de votre objet et définir deux classes avec des propriétés de survol différentes. 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 ceci que j'ai trouvé sur: Changer 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 correspond à votre objectif, vous pouvez ajouter la fonctionnalité de survol sans utiliser css et utiliser l' onmouseoverévénement en javascript

Voici un extrait de code

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

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

Désolé de trouver cette page 7 ans trop tard, mais voici un moyen beaucoup plus simple de résoudre ce problème (changer les styles de survol arbitrairement):

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

Assez vieille question donc j'ai pensé que j'ajouterais une réponse plus moderne. Maintenant que les variables CSS sont largement prises en charge, elles peuvent être utilisées pour y parvenir sans avoir besoin d'événements JS ou !important.

Prenant l'exemple du PO:

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

Nous pouvons maintenant le faire dans le 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);
}

Et ajoutez l'état de survol en utilisant javascript comme ceci:

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

Voici un exemple de travail https://codepen.io/ybentz/pen/RwPoeqb

Je recommanderais de remplacer toutes les :hoverpropriétés :activelorsque vous détectez que l'appareil prend en charge le toucher. Appelez simplement cette fonction lorsque vous le faites commetouch()

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

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 cela, vous pouvez déclarer

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

Il utilise les techniques mentionnées ci-dessus et essaie également de résoudre les problèmes entre navigateurs. S'il existe pour une raison quelconque un ancien navigateur comme IE9, cela limitera le nombre de balises STYLE, car l'ancien navigateur IE avait cette étrange limite pour le nombre de balises STYLE disponibles sur la page.

En outre, il limite le trafic vers les balises en ne mettant à jour les balises que périodiquement. Il existe également un support limité pour la création de classes d'animation.

Déclarez une variable globale:

var td

Ensuite, sélectionnez votre cochon guiena en le <td>récupérant id, si vous voulez tous les changer, alors

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

Faire fonction doit être déclenchée et une boucle pour changer tous vos souhaités tds »

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

Accédez à votre feuille CSS:

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

Et c'est tout, avec cela, vous pouvez faire en sorte que toutes vos <td>balises soient background-color: #00ff00;survolées en modifiant directement sa propriété css (basculement entre les classes css).

Cela n'ajoute pas réellement le CSS à la cellule, mais donne 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 novice, alors prenez-la pour ce qu'elle 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 souhaitez mettre en surbrillance sur "hoverCell".

Vous pouvez créer une variable CSS, puis la modifier dans JS.

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

pour le changer en JS, j'ai fait ces petites fonctions pratiques:

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

et

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

Vous pouvez créer autant de variables CSS que vous le souhaitez, et je n'ai trouvé aucun bogue dans les fonctions; Après cela, tout ce que vous avez à faire est de l'intégrer dans votre CSS:

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

Et puis bam, une solution qui ne nécessite que quelques fonctions CSS et 2 JS!

Vous pouvez utiliser des événements de souris pour contrôler comme le survol. Par exemple, le code suivant rend visible lorsque vous passez la souris sur cet élément.

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

Si vous utilisez un langage html léger ux lang, regardez ici un exemple , écrivez:

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

Le code ci-dessus exécute la méta-balise css: hover.