jQuery - need to toggle one element when hovering another element

Question

I'm learning jquery and I've been banging my head against this for a few days. I'm trying to create a page that has one large featured image and 4 small thumbnails beneath it. When the user hovers over the thumbnail, I need to change the featured image.

I'm having trouble expressing that when mouse hovers over A, toggle B. But when mouse hovers over C, then toggle D. What's currently happening is that all pshow classes toggle at the same time. Should I be using $(this) to toggle the current element? Should I be using a variable?

I've been searching stackoverflow for a similar question, but I haven't been able to find anything. Sorry if this is a duplicate. Is this the right approach??

JQUERY

<script type="text/javascript"> 
    $(document).ready(function () {
        $('.hover').mouseenter(function() {
        $('.pshow').toggle();
        });
    });
</script>

HTML

<div id="story1">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story2">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story3">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>

duplicate? stackoverflow.com/questions/8527145/…

j-a
– j-a

2014-04-29 18:35:57 +00:00
Commented Apr 29, 2014 at 18:35 — j-a
– j-a, Commented Apr 29, 2014 at 18:35

Kylie · Accepted Answer · 2013-08-10 20:56:15Z

2

I would do it like this...

Put the class into the div, instead of the H2

<div class="hover"  id="story1">

Then your Jquery...

 $('.hover').mouseenter(function() {
     $('.pshow').hide();
    $(this).find('.pshow').toggle();
    });

DEMO HERE

answered Aug 10, 2013 at 20:56

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2013-08-10 21:17:07Z

2

You can use pure CSS for that

For that to work you would need to remove the inline style and set the property in CSS.

As inline styles has more specificity compared to a style defined in CSS.

HTML

<div id="story1">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow"  src="#" />
</div>

CSS

img{              // .pshow
    display: none;
}

a:hover + img {  // a:hover + .pshow
    display: block;
}

Check Demo

edited Aug 10, 2013 at 21:17

answered Aug 10, 2013 at 20:58

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Kylie Over a year ago

Uh...that wont work...it will still show all....but also, just tried it in jsFiddle. Didnt work

putvande · Accepted Answer · 2013-08-10 21:01:40Z

0

You need to change your selector to select only one element with the class pshow. You can do that like this:

<script type="text/javascript"> 
$(document).ready(function () {
    $('.hover').mouseenter(function() {
         $(this).closest('div').find('img.pshow').toggle();
    });
});
</script>

edited Aug 10, 2013 at 21:01

answered Aug 10, 2013 at 20:53

putvande

15.3k3 gold badges37 silver badges51 bronze badges

2 Comments

Sterling Archer Over a year ago

at least explain it so he learns how to do it again instead of just copy and pasting

Smern Over a year ago

parents() would be a bad option... if there is a surrounding div over all the story divs... it would select all the pshow images. you should use closest() instead.

Collectives™ on Stack Overflow

jQuery - need to toggle one element when hovering another element

3 Answers 3

Comments

Check Demo

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related