web-dev-qa-db-fra.com

Changement: survol des propriétés CSS avec JavaScript

J'ai besoin de trouver un moyen de changer CSS: survolez les propriétés 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;
}

J'aimerais utiliser JavaScript pour modifier les propriétés de survol de <td> en, disons, background: # 00ff00. sais que je pourrais accéder à la propriété background style en utilisant JavaScript comme:

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

Mais je ne connais pas d'équivalent JavaScript pour: hover. Comment puis-je changer le fond de ces <td>: hover à l'aide de JavaScript?

Votre aide est grandement appréciée!

javascripthtmlcssdhtml
70
Wagtail

Pseudo classes comme :hover ne fait 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 éditer la règle de la feuille de style, ajouter une nouvelle règle, ou ajouter une nouvelle feuille de style incluant le nouveau :hover rè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);
85
kennebec

Vous ne pouvez pas changer ou modifier le sélecteur actuel :hover Via Javascript. Vous pouvez cependant utiliser mouseenter pour changer le style et revenir en arrière sur mouseleave (merci, @Bryan).

33
Achal Dave

Ce que vous pouvez faire est de changer la classe de votre objet et de 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 cela, 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");
7
isgoed

Si cela vous convient, vous pouvez ajouter la fonctionnalité de survol sans utiliser css ni utiliser 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>
2
Namit Juneja

Déclarer une variable globale:

var td

Ensuite, sélectionnez votre cochon guiena <td> En le faisant par son id, si vous voulez tout changer, alors

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

Créez une fonction à déclencher et une boucle pour changer tous vos td souhaités

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

Accédez à votre fiche CSS:

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

Et c’est tout, vous pouvez ainsi faire en sorte que toutes vos balises <td> Obtiennent un background-color: #00ff00; Lors du survol en modifiant directement leur propriété css (basculement entre les classes css).

1
Gabriel Barberini

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

https://github.com/terotests/css

Avec ça tu peux dire

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

Il utilise les techniques mentionnées ci-dessus et essaie également de prendre en charge les problèmes liés à plusieurs navigateurs. S'il existe pour une raison quelconque un ancien navigateur comme IE9, le nombre de balises STYLE sera limité, 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.

1
Tero Tolonen

Ce n'est pas réellement ajouter le CSS à la cellule, mais donne le même effet. Tout en fournissant le même résultat que les précédents, 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 "hoverCell".

1
elPastor

Désolé de trouver cette page 7 ans trop tard, mais voici une façon beaucoup plus simple de résoudre ce problème (changer de style de survol de manière arbitraire):

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');
0
David Spector

Je recommanderais de remplacer toutes les propriétés :hover Par :active Lorsque vous détectez que l'appareil prend en charge le toucher. Appelez simplement cette fonction quand vous le faites en tant que 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');
              }
            }
          }
        }
      }
    }
0
Shobhit Sharma