CODEWITHSUNDEEP
jqueryclasshover
Duncan
Duncan

Reputation: 37

jQuery multiple classes and add class on hover

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?

Upvotes: 3

Views: 3322

Answers (4)

Sampson
Sampson

Reputation: 268344

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/

Upvotes: 3

Duncan
Duncan

Reputation: 37

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!

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 1

Anoop
Anoop

Reputation: 23208

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

Upvotes: 0

Related Questions