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>

Here is the jquery:

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

What the above code produces is the hover effect on all class items instead of just the item I am hovering. I tried to add

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

but no beans there.

As you could of guessed I am a jQuery newbie and would really appreciate a point in the right direction…

Thanks in advance

Answer 1

Try:

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

You could also use: $(this).parents('.views-row') to attach to that particular row but closest only returns one element.

Fiddled: http://jsfiddle.net/iambriansreed/Ct39b/