11485 sujets

JavaScript, DOM et API Web HTML5

AddClass sur mouseover

Bonjour,

Je cherche à faire quelque chose de simple, que j'avais réussi à faire il y a quelques mois mais qui a subitement disparu.
J'ai une liste de liens <a> avec la même classe single-section.
Je souhaite qu'au survol d'un des liens, on ajoute une classe hover-in au lien survolé et hover-off aux autres.

La première étape est facile 

$('.single-section').mouseover(function(){ 
        $(this).addClass('hover-in') },                           
);
$('.single-section').mouseout(function(){ 
        $(this).removeClass('hover-in') }, 
);


En revanche impossible d'ajouter le hover-off aux autres liens sans que celui survolé ne le reçoive aussi (et je ne veux pas). J'ai farfouillé la toile en vain.

Merci pour votre aide.
une piste (attention en JS pas en Jquery).


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="01.css">
  <title>choix d'1 lien parmi d autres</title>
</head>
<body>
 
<div>
  <a href="#" class="on" id="0">un</a>
  <a href="#" class="on" id="1">deux</a>
  <a href="#" class="on" id="2">trois</a>
  <a href="#" class="on" id="3">quatre</a>
  <a href="#" class="on" id="4">cinq</a>
</div>

<p id="affiche"></p>

<script src="01.js"></script>
</body>
</html>




a{
  display: inline-block;
  width: 80px;
  padding: 5px;
  background-color: bisque;
  text-align: center;
  text-decoration: none;}

.on{color: black;}
.off{color: white;}




var a = document.querySelectorAll('a');
var len = a.length;
var affiche = document.querySelector('#affiche');

for(i=0; i<len; i++){
  a[i].addEventListener('mouseover', function(e){
    var texte = e.target.innerText;
    var idd= e.target.id;
    affiche.textContent = texte;
      for(i=0; i<len; i++ ){
        a[i].className = 'off';
      }
    a[idd].className = 'on';
  });
}
Pardon, j ai remplacé une classe par une autre au lieu d'ajouter une classe à celle existante.

Petite modif des fichiers 01.css et 01.js : 


a{
  display: inline-block;
  width: 80px;
  padding: 5px;
  background-color: bisque;
  text-align: center;
  text-decoration: none;}

.on{color: black;}
.bold{font-weight: bold; color: red;}




var a = document.querySelectorAll('a');
var len = a.length;
var affiche = document.querySelector('#affiche');

for(i=0; i<len; i++){
  a[i].addEventListener('mouseover', function(e){
    var texte = e.target.textContent;
    var idd= e.target.id;
    affiche.textContent = texte;
    a[idd].className += ' bold';
  });
  a[i].addEventListener('mouseout', function(e){
      for(i=0; i<len; i++ ){
        a[i].className = 'on';
      }
    affiche.textContent = "";
  });

}



NB : J ai utilisé className , on aurait pû utiliser classList.
Essaye ça

$('.single-section').on("mouseover",function(){ 
        $('.single-section').removeClass("hover-in");
        $(this).addClass('hover-in'); 
});                           
$('.single-section').on("mouseout",function(){ 
        $('.single-section').addClass("hover-in");
        $(this).removeClass('hover-in');  
});
Sujet clos
Aller à