jQuery multiple classes and add class on hover

Question

I'd really appreciate someones help as this is driving me nuts!

So I've got the following two imgs that sit next to each other, and are used in various places throughout the page.

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

What I need is when I hover over either of the two images, for a class of .lefthover or .righthover to be added to the left or right container at the same time and then to be removed again when mouseout. So the code on hover would look as so:

<img class="curtain containerLeft lefthover" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight righthover" src="http://example.com/containerright.jpg" />

and revert to this on mouseout:

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

I don't want the lefthover and righthover applied to every instance of these images on the page - just the two that I've moused over.

I've got close and tried many things but can only either get all instances of the images to have the appropriate classes added or only the image I've hovered over (not the one next to it.

And I can't figure out how to select another class in the same div (I can do it with .children, but this isn't appropriate in this instance). So I thought this might work for instance:

$('.curtain')
.hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".curtainLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});

Any ideas or thoughts?

Sampson · Accepted Answer · 2012-11-15 14:18:34Z

3

It's generally best to avoid JavaScript when pure CSS would work. In this case, you don't appear to need JavaScript to begin with since you can use the :hover pseudo-class.

/* Normal Styles */
.containerLeft { 
    background-color: red; 
}
.containerRight { 
    background-color: blue; 
}

/* Hover Styles */
.container:hover .containerLeft,
.container:hover .containerRight {
    background-color: yellow;
}

Demo: http://jsfiddle.net/xYgm6/2/

If you need distinct styles for each:

.container:hover .containerLeft {
    border: 1px solid red;
}
.container:hover .containerRight {
    border: 1px solid blue;
}

Demo: http://jsfiddle.net/xYgm6/3/

edited Nov 15, 2012 at 14:18

answered Nov 14, 2012 at 20:47

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

5 Comments

Mark Pieszak - Trilon.io Over a year ago

+1. Completely agree, especially when it's such a basic thing

Duncan Over a year ago

Yeah, except the .hoverleft needs a border on top, left and bottom, whilst .hoverright needs border on top, right and bottom. So its not identical CSS for both classes.

Sampson Over a year ago

@Duncan Then break it up into two blocks.

Duncan Over a year ago

In fact your solution is not using the same div structure as mine, so I don't believe a pure CSS method would work. Note the my .curtain class is in the same div as .leftContainer and .rightContainer. So how could I also target the left class when hovering on the right and vice versa purely in CSS (and without also selecting all left/right classes on the page)?

Sampson Over a year ago

@Duncan Just updated the answer to reflect your div structure. I don't see any reason why this can't be solved with pure CSS.

Sushanth -- · Accepted Answer · 2012-11-14 20:56:29Z

Considering the images are enclosed inside a div with class container..

HTML

<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div  class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>

Javascript

$('.curtain').hover(function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').addClass('lefthover');
    $container.find('.containerRight').addClass('righthover');
}, function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').removeClass('lefthover');
    $container.find('.containerRight').removeClass('righthover');
});

Fiddle

Anoop · Accepted Answer · 2012-11-14 20:45:39Z

0

Assuming all pair of images has different parents. and both images are siblings.

$('.containerLeft').parent().hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".containerLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});

answered Nov 14, 2012 at 20:45

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

1 Comment

Duncan Over a year ago

Wouldn't this just work when hovering on .containerLeft. So I'd need duplicate code for hovering on .containerRight?

Duncan · Accepted Answer · 2012-11-15 07:31:00Z

Thanks

I don't believe the purely CSS option would work because of the multiple identical classes on the page and how to target only the correct two images each time. Anyway, for ref I've now also fixed some jQuery that would work:

$('.containerLeft').hover(function() {
    $(this).addClass('lefthover');
    $(this).next().addClass('righthover');   
}, function() {
    $(this).removeClass('lefthover');
    $(this).next().removeClass('righthover');   
});

$('.containerRight').hover(function() {
    $(this).prev().addClass('lefthover');        
    $(this).addClass('righthover');
}, function() {
    $(this).removeClass('righthover');
    $(this).prev().removeClass('lefthover'); 
});

Probably could be simplified even further.

I really appreciate everyones answers - thanks!

Collectives™ on Stack Overflow

jQuery multiple classes and add class on hover

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related