0
votes

QuerySelectorAll DIV et changer sa largeur surmouseover JavaScript

Je suis nouveau à cela et j'essaie de sélectionner plusieurs c.card forts> dans mon HTML (la part de la couleur de fond gris)

et modifier sa largeur Onmouseover, j'ai également des contenus qui sont dans Affichage: Aucun CODE> et font tout apparaître Onmouseover à l'aide de JavaScript, c'est le code que j'ai. Merci de compréhension. P>

var x = document.querySelectorAll(".card");
var i;

for (i = 0; i < x.length; i++) {
    x[i].style.width = "300px";
}

x.onmouseover = () => {
    x.style.width = "300px";
};

javascript onmouseover queryselector

0 commentaires

5 Réponses :

1
votes

Vous pouvez le changer légèrement de sorte que x.onmouseover est à l'intérieur de la boucle, par exemple: xxx

L'alternative utilise une technique appelée bouillonnement , où les événements "bulle" jusqu'à des éléments parent de ci-dessous. En utilisant cela, vous obtenez ceci: xxx



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    4
 votes
                                
                            
                            
                                
                                      .Queryselectorallall (". Carte")  code> retournera une collection de  .Card  code> éléments, donc  xxx  pré> 
 ne fonctionnera pas .  p> 
 Vous avez des options suivantes pour faire ce que vous voulez.  p> 

  Ajouter  Mouseover  code> Evénement sur tous les éléments  .Card  code> En boucle sur la collection renvoyée par  .Queryselectorall ()  code>  p>
  p> 


<div class="card"></div>
<div class="card"></div>
  Ajouter  Mousousever  code> Evénement sur l'élément parent commun de tous les éléments  .Card  code> éléments et à l'aide de  Event.Target  Code> Propriété, augmentez la largeur du  .Card  code> élément qui a déclenché la  Mouseover  code> événement  p>
  p> 


.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
  Faites ceci via CSS en utilisant : plancher  code> pseudo-classe.  p>
  p> 


.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}