Using jQuery to Hover over one element and apply the effect in another

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

can you please include a simple explanation ... ie when i hover of the DOM element with the id of xxx i want the css applied to DOM element yyy .... i actually have no idea what your expected result is ! — Manse
– Manse, Commented Apr 25, 2012 at 14:25
I don't think the other answers realize that <div class="views-row">...</div> is repeated and that the action should occur only on each row. — iambriansreed
– iambriansreed, Commented Apr 25, 2012 at 14:39

iambriansreed · Accepted Answer · 2012-04-25 14:37:40Z

3

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/

edited Apr 25, 2012 at 14:37

answered Apr 25, 2012 at 14:26

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Pflantzer Over a year ago

I don't understand either.. I clicked the check mark... any way to reverse that?

Adam Pflantzer Over a year ago

yea, working on that... was that me that downvoted though? I sure hope not because your solution was perfect.

iambriansreed Over a year ago

@AdamPflantzer No you need a rep of > 125 to DV.

Selvakumar Arumugam · Accepted Answer · 2012-04-25 14:32:28Z

1

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

The above should work if the div containing h5 is always above .views-field.

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

edited Apr 25, 2012 at 14:32

answered Apr 25, 2012 at 14:25

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

3 Comments

Jamiec Over a year ago

Would also work better if you didnt abbreviate the css key and value you're trying to edit; Its text-decoration and underline.

Jamiec Over a year ago

It wasn;t me but some eejit is just downvoting every answer, mine included.

Adam Pflantzer Over a year ago

yea, sorry about that... i know the correct property and value there.. just trying to save a few keystrokes.. sorry for the confusion

Jamiec · Accepted Answer · 2012-04-25 14:36:04Z

1

I would think the easiest way to do this is scope the h5's to the previous element

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

Here's a jsfiddle which demonstrates: http://jsfiddle.net/v39UQ/

answered Apr 25, 2012 at 14:36

Jamiec

136k15 gold badges143 silver badges202 bronze badges

1 Comment

Jamiec Over a year ago

Ha, downvoter is an eejit. This (along with other answers) solves the reqirement, and this one includes a working example. Learn when to use downvotes!

William Calvin · Accepted Answer · 2012-04-25 14:39:20Z

-1

See the example here

Here is the code:

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

Just your information you can do it using pure css for that code above see below code:

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

answered Apr 25, 2012 at 14:39

William Calvin

6256 silver badges19 bronze badges

2 Comments

iambriansreed Over a year ago

-1 the hover event should be applied to the image as per the OP.

Adam Pflantzer Over a year ago

No, that's not true. This would only create a hover state if I hovered over the h5 element. I want to hover over the views-field element and have a hover state applied to h5.

Collectives™ on Stack Overflow

Using jQuery to Hover over one element and apply the effect in another

4 Answers 4

3 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related