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.

David Murdoch · Accepted Answer · 2010-05-04 23:24:52Z

2

You were close!

add a comma:

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

answered May 4, 2010 at 23:24

David Murdoch

89.6k40 gold badges155 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

marcamillion Over a year ago

How do I override the other class. E.g. how do I replace the CSS attributes currently associated with 'hover' and replace it with the CSS attributes associated with my other class - rather than adding it.

artlung Over a year ago

You would need to define either the bubble or bottom classes in such a way that they override. Usually just having them load later will do it, but you could also add !important to declarations that are stubborn.

David Murdoch Over a year ago

@artlung. +1 to what you said.

helios456 · Accepted Answer · 2010-05-04 23:25:09Z

1

Here's how to do it.

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

answered May 4, 2010 at 23:25

helios456

1,64416 silver badges25 bronze badges

Comments

rmurphey · Accepted Answer · 2010-05-04 23:32:33Z

1

Something like

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

should work if you are using jQuery 1.4.2

answered May 4, 2010 at 23:32

rmurphey

5523 silver badges7 bronze badges

Comments

artlung · Accepted Answer · 2010-05-05 00:36:46Z

1

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');
});

edited May 5, 2010 at 0:36

answered May 4, 2010 at 23:42

artlung

33.5k19 gold badges76 silver badges124 bronze badges

3 Comments

marcamillion Over a year ago

can I just use the class name 'hotspothover' rather than '.hotspot:hover'?

artlung Over a year ago

Yes. What my code is saying is this: "For all the items on my page with the class hotspot or the class hotspothover - if they get hovered over, permanently add the classes bubble and bottom to them. Also, if you want the classes added on hover, and removed on un-hover, use toggleClass

marcamillion Over a year ago

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'.

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related