Ajouter une classe à la fonctionnalité .hover sur un nom de classe spécifique - jQuery

Donc, tout au long de mon document, je voudrais à chaque fois que l'utilisateur passe la souris sur un élément avec un nom de classe spécifique, je voudrais ajouter une classe .Ajouter une classe à la fonctionnalité .hover sur un nom de classe spécifique - jQuery

Mon CSS ressemble à ceci:

.hotspot:hover, .hotspothover 
    { 
    border: 4px solid #fff; 
    box-shadow: 0px 0px 20px #000; 
    -webkit-box-shadow: 0px 0px 20px #000; 
    -moz-box-shadow: 0px 0px 20px #000; 
    z-index: 1; 
    }

Nom de la classe: "hotspot".

J'ai essayé, mais il ne semble pas fonctionner:

$("#hotspot.hover #hotspothover").addClass("bubble bottom");

Merci.

Source

2010-05-04 marcamillion

Vous étiez proche!

ajouter une virgule:

$(".hotspot:hover, .hotspothover").addClass("bubble bottom");

Source

2010-05-04 23:24:52

Comment remplacer l'autre classe. Par exemple. Comment puis-je remplacer les attributs CSS actuellement associés à «hover» et le remplacer par les attributs CSS associés à mon autre classe - plutôt que de l'ajouter. – marcamillion

Vous devez définir les classes 'bubble' ou' bottom' de telle sorte qu'elles soient prioritaires. Habituellement, il suffit de les charger plus tard, mais vous pouvez aussi ajouter '! Important' aux déclarations qui sont têtues. – artlung

@artlung. +1 à ce que vous avez dit. –

Voici comment faire.

$ (". Hotspot: hover, .hotspothover"). AddClass ("fond de bulle");

Source

2010-05-04 23:25:09 helios456

Quelque chose comme

$('.targetClass').hover(function() { $(this).toggleClass('hovered'); });

devrait fonctionner si vous utilisez jQuery 1.4.2

Source

2010-05-04 23:32:33 rmurphey

Peut-être que j'ai mal compris, mais je pensais que vous vouliez ajouter le vol stationnaire. Cela montre que:

$('.hotspot, .hotspothover').hover(function(){ 
    $(this).addClass('bubble bottom'); 
});

Si vous voulez les également supprimés lorsque plané hors tension, puis changer addClass à toggleClass.

MISE À JOUR: Naudé a suivi et a demandé:

Maintenant, ce qui se passe si je les voulais remplacer 'hotspot' ou 'hotspothover'? Comme dans tous les éléments de la page avec hotspot classe ou la classe « hotspothover » le remplacer par « bulle fond »

je changerais comme ceci:

$('.hotspot').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspot'); 
}); 
$('.hotspothover').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspothover'); 
});

maintenant , vous pouvez le faire aussi, mais si vous voulez être précis sur les actions, le faire comme deux séries d'appels a plus de sens.

$('.hotspothover, .hotspot').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspothover hotspot'); 
});

Source

2010-05-04 23:42:43 artlung

puis-je simplement utiliser le nom de classe 'hotspothover' plutôt que '.hotspot: hover'? – marcamillion

Oui.Ce que dit mon code est ceci: "Pour tous les articles sur ma page avec la classe" hotspot "ou la classe" hotspothover "- s'ils sont survolés, ajoutez les classes" bubble "et" bottom "de manière permanente. , si vous voulez que les classes soient ajoutées à hover, et supprimées à un hover, utilisez 'toggleClass' – artlung

Maintenant, que se passe-t-il si je veux qu'ils remplacent 'hotspot' ou 'hotspothover'? Comme dans, pour tous les éléments de la page avec classe hotspot ou la classe 'hotspothover' le remplacer par 'bubble bottom' – marcamillion

Ajouter une classe à la fonctionnalité .hover sur un nom de classe spécifique - jQuery

Répondre

Questions connexes