jquery - 使用 jQuery 将鼠标悬停在一个元素上并将效果应用于另一个元素

Question

<div class="views-row">
<div>
    <h5 class="product-name">
        <a href="#">Dots</a>
    </h5>  
</div>  
<div class="views-field">       
    <div class="field-content">
        <a href="#">
            <img alt="" src="#" />
        </a>
    </div>  
</div>

这是 jquery:

    $('.views-field').hover(function() {
    $('h5').css('text-decoration', 'underline');
}, function() {
    $('h5').css('text-decoration', 'none');
});

上面的代码产生的是对所有类项目的悬停效果，而不仅仅是我悬停的项目。我尝试添加

$(this).parent('views-row').find('h5').css('text-dec', 'under')

但那里没有 bean 。

正如你可能猜到的那样，我是一个 jQuery 新手，并且非常感谢在正确的方向上的一点......

提前致谢

Answer 1

尝试:

$('.views-field').hover(function() {
    $('h5', $(this).closest('.views-row')).css('text-decoration', 'underline');
}, function() {
    $('h5', $(this).closest('.views-row')).css('text-decoration', 'none');
});

您还可以使用:$(this).parents('.views-row') 附加到该特定行，但closest 仅返回一个元素。

摆弄:http://jsfiddle.net/iambriansreed/Ct39b/