CODEWITHSUNDEEP
jquerycss
TopTomato
TopTomato

Reputation: 585

Trying to select elements within a $(this) selector

Trying to select elements within a $(this) selector

I have several divs of a class .category_row_belts. Within each one is an anchor tag enclosing an H2 tag and an image.

when rolling over the div, i'm trying to use jQuery's .hover() and addClass() to create a rollover effect on both the H2 and img simultaneously. in other words, when rolling over the div, all it's elements light up. Obviously i have to use $(this) and trying to use children() but it's not working. 

<div class="category_row_belts">
<a href="linkhere.html">
<h2 class="belts-cat-description" >Product name here</h2>
<img src="img/product-pic.jpg">
</a>
</div>

my js so far is...

$('.category_row_belts').hover(
function(){
    $(this).children('a > img').addClass('rolloverborder');
    $(this).children('a > h2').removeClass('belts-cat-description');
    $(this).children('a > h2').addClass('rollovertxt');
},
function(){
    $(this).children('a > img').removeClass('rolloverborder');
    $(this).children('a > h2').removeClass('rollovertxt');
    $(this).children('a > h2').addClass('belts-cat-description');
})

Upvotes: 1

Views: 38

Answers (1)

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34160

$('.category_row_belts').hover(
function(){
    $(this).find('img').addClass('rolloverborder');
    $(this).find('h2').removeClass('belts-cat-description')
    .addClass('rollovertxt');
},
function(){
    $(this).find('img').removeClass('rolloverborder');
    $(this).find('h2').removeClass('rollovertxt')
   .addClass('belts-cat-description');
})

Upvotes: 2

Related Questions