JQuery hover toggle related selector

Question

I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? I.e. when you hover over listid-1, image-1 fades in.

This is the best I could do:

$(document).ready(function(){
  $( ".options li" ).hover(function( event ) {
    $('.image-' + (this - ".listid")).toggleFade( "300" );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg'>
    <img class='image-2' src='2.jpg'>
    <img class='image-3' src='3.jpg'>
    <img class='image-4' src='4.jpg'>
    <img class='image-5' src='5.jpg'>
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid-1'>One</li>
        <li class='listid-2'>Two</li>
        <li class='listid-3'>Three</li>
        <li class='listid-4'>Four</li>
        <li class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

I think the right function you were looking for is .fadeToggle("300") instead of .toggleFade( "300" ) — andrepaulo
– andrepaulo, Commented Feb 23, 2017 at 16:14

Rory McCrossan · Accepted Answer · 2017-02-23 16:09:26Z

You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle(), not toggleFade().

To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:

$(document).ready(function() {
  $(".options .listid").hover(function(event) {
    $('.image').eq($(this).index()).fadeToggle("300");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image' src='1.jpg'>
    <img class='image' src='2.jpg'>
    <img class='image' src='3.jpg'>
    <img class='image' src='4.jpg'>
    <img class='image' src='5.jpg'>
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid'>One</li>
        <li class='listid'>Two</li>
        <li class='listid'>Three</li>
        <li class='listid'>Four</li>
        <li class='listid'>Five</li>
      </ul>
    </nav>
  </div>
</div>

Nenad Vracar · Accepted Answer · 2017-02-23 16:32:26Z

1

You can get class of current li and split at - to get number and use it as selector for image.

$('img').hide()

$(".options li").hover(function() {
  $('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg' alt="1">
    <img class='image-2' src='2.jpg' alt="2">
    <img class='image-3' src='3.jpg' alt="3">
    <img class='image-4' src='4.jpg' alt="4">
    <img class='image-5' src='5.jpg' alt="5">
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid-1'>One</li>
        <li class='listid-2'>Two</li>
        <li class='listid-3'>Three</li>
        <li class='listid-4'>Four</li>
        <li class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

If you have multiple classes on images instead you can use data attributes to select images.

$('img').hide()

$(".options li").hover(function() {
  $('img.image-' + $(this).data('img')).fadeToggle(300)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg' alt="1">
    <img class='image-2' src='2.jpg' alt="2">
    <img class='image-3' src='3.jpg' alt="3">
    <img class='image-4' src='4.jpg' alt="4">
    <img class='image-5' src='5.jpg' alt="5">
  </div>
  <div class="options">
    <nav>
      <ul>
        <li data-img="1" class='listid-1'>One</li>
        <li data-img="2" class='listid-2'>Two</li>
        <li data-img="3" class='listid-3'>Three</li>
        <li data-img="4" class='listid-4'>Four</li>
        <li data-img="5" class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

edited Feb 23, 2017 at 16:32

answered Feb 23, 2017 at 16:13

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

3 Comments

user2798841 Over a year ago

Would this work if there were multiple classes, i.e. class='menu-item menu-item-34 listid-1' ?

Nenad Vracar Over a year ago

No, i that case you can use custom data attributes.

user2798841 Over a year ago

How would I go about this?

Collectives™ on Stack Overflow

JQuery hover toggle related selector

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related