jquery - 尝试在 $(this) 选择器中选择元素

Question

尝试在 $(this) 选择器中选择元素

我有几个 .category_row_belts 类的 div。每一个中都有一个锚标签，其中包含一个 H2 标签和一个图像。

当翻转 div 时，我试图使用 jQuery 的 .hover() 和 addClass() 同时在 H2 和 img 上创建翻转效果。换句话说，当滚动 div 时，它的所有元素都会亮起。显然我必须使用 $(this) 并尝试使用 children() 但它不起作用。

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

到目前为止，我的 js 是...

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

Answer 1

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