CODEWITHSUNDEEP
jquery
crimsonvessel
crimsonvessel

Reputation: 217

Add/Remove class from img within containing li

I have a series of li's that each contain an image and a related text link. Both image and text link to the same page. When you hover over the image, I currently have CSS transitions setup to adjust the border radius, and return back when you roll off. However, the same doesn't happen when you hover over the text link, and I would like that to happen.

So I created a hover class (.customerimagehover) for the image (.customerimage) that I want to trigger when you hover over the text link (.customertitle).

Tried my hand at it, but nothing happens on hovering over the text link. Pretty sure my syntax is off, not a jQuery/JS whiz. If someone could steer me in the right direction, that would be great.

<li>
    <a href="#"><img class="customerimage" src="#"></a><br/>
    <a class="customertitle" href="#">Customer Title</a>
</li>

<script>
    $('.customertitle').hover.closest('img').removeClass('customerimage').addClass('customerimagehover');
</script>

Upvotes: 1

Views: 57

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Try

$('.customertitle').hover(function () {
    $(this).closest('li').find('img').removeClass('customerimage').addClass('customerimagehover');
});

.hover()

.find()

Fiddle Demo

$('.customertitle').hover(function () {
    $(this).closest('li').find('img').toggleClass('customerimage  customerimagehover');
});

Upvotes: 1

Dima Pog
Dima Pog

Reputation: 132

Just use css :hover option! It will be better!

http://www.w3schools.com/cssref/sel_hover.asp

Upvotes: 0

Related Questions