Add class to .hover functionality on a specific class name - jQuery

Question

So, throughout my entire document, I would like for every single time the user hovers over an element with a specific class name, I would like a class to be added.

My CSS looks like this:

.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;
    }

Class name: "hotspot".

I tried this, but it doesn't seem to work:

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

Thanks.

Answer 1

You were close!

add a comma:

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

Answer 2

Here's how to do it.

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

Answer 3

Something like

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

should work if you are using jQuery 1.4.2

Answer 4

Maybe I misunderstood, but I thought you wanted it added on hover. This shows that:

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

If you want them also removed when hovered off, then change addClass to toggleClass.

UPDATE: Questioner followed up and asked:

Now what happens if I wanted them to replace 'hotspot' or 'hotspothover' ? As in, for all items on the page with class hotspot or the class 'hotspothover' replace it with 'bubble bottom'

I would change it like this:

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

Now, you could do this too, but if you want to be specific about the actions, doing it as two sets of calls makes more sense.

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