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

时间:2012-04-25 14:23:17

标签: jquery

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

但那里没有豆子。

你可能已经猜到我是一个jQuery新手,并且真的很欣赏正确方向的一点......

提前致谢

4 个答案:

答案 0 :(得分:3)

尝试:

$('.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/

答案 1 :(得分:1)

尝试$(this).prev().find('h5').css('text-decoration', 'underline');

如果包含h5的div始终高于.views-field

,则上述情况应该有效
$('.views-field').hover(function() {
    $(this).prev().find('h5').css('text-decoration', 'underline');
}, function() {
    $(this).prev().find('h5').css('text-decoration', 'none');
});

答案 2 :(得分:1)

我认为最简单的方法是将h5范围扩展到前一个元素

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

这是一个jsfiddle,演示:http://jsfiddle.net/v39UQ/

答案 3 :(得分:-1)

请参阅示例here

以下是代码:

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

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

您可以使用纯css为上述代码执行此操作 见下面的代码:

.views-row h5:hover{
    text-decoration: underline;
}