1

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.

I am looking to highlight the item hovered on both lists that will work in both directions.

So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.

Notes:

  • I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
  • Highlighting can be either as an .active class or inline styling.

Similar to the below question but works in both directions: Jquery 'Highlight' element with the same class

<ul>
  <li class="app-hover-select">
    <a class="item-1" href="">Apples</a>
  </li>
  <li class="app-hover-select">
    <a class="item-2" href="">Pears</a>
  </li>
  <li class="app-hover-select">
    <a class="item-3" href="">Bananas</a>
  </li>
  <li class="app-hover-select">
    <a class="item-4" href="">Pineapples</a>
  </li>
</ul>
<div class="wrapper">
  <div class="app-hover-select">
    <a class="item-1" href="">
      <img scr="">
      Apples
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-2" href="">
      <img scr="">
      Pears
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-3" href="">
      <img scr="">
      Bananas
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-4" href="">
      <img scr="">
      Pineapples
    </a>
  </div>
</div>

My current jQuery with current HTML:

        jQuery('.app-hover-select > a').hover(function() {
            var appClass = jQuery(this).attr("class");
            jQuery(appClass).toggleClass('active');
        });

My logic is:

  1. On hover of .app-hover-select > a
  2. var appClass = Get the class
  3. Add class active to all elements with the class appClass
IamOnStage
  • 193
  • 2
  • 13
  • Please show us what you have tried. – Carsten Løvbo Andersen Nov 17 '21 at 10:43
  • *Similar to [answer] but works in both directions* - then just add it in the other direction. – freedomn-m Nov 17 '21 at 10:44
  • By giving both sides the same class you actually made it even easier - just `$(".item-1").hover(() => $(".item1").addClass("hover"), () => $(".item1").removeClass("hover"))` - of course you probably don't want to do this otherwise you have to have 4x the same code (and more if you add more items). I would add a `data-item="1"` (etc) to both sides and the same code but using `[item=" + $(this).data(item) + "]"` (and not using arrow functions of course) – freedomn-m Nov 17 '21 at 10:47
  • @CarstenLøvboAndersenn Please see above my current attempt. – IamOnStage Nov 17 '21 at 12:32
  • 1
    Change `jQuery(appClass)` to `jQuery("." + appClass)` to add the class selector. I would change hover to mouseover and remove active from all active, then you're sorted: https://jsfiddle.net/d1c97rx4/ (though this may not be the most efficient... so can be tweaked) – freedomn-m Nov 17 '21 at 14:15
  • @freedomn-m That is perfect, thank you. I have also added a mouseout function as well. https://codepen.io/essiem/pen/MWvZVRY – IamOnStage Nov 18 '21 at 06:42

1 Answers1

1

In case you want this:

enter image description here

Try this-

jQuery(".app-hover-select > a").hover(function () {
  const listOfItems = this.parentElement.parentElement;
  const listItem = this.parentElement;
  const i = Array.from(listOfItems.children).indexOf(listItem);

  jQuery("ul .app-hover-select").each((_i, el) => {
    if (_i === i) {
      el.classList.add("active");
    } else {
      el.classList.remove("active");
    }
  });
  jQuery(".wrapper .app-hover-select").each((_i, el) => {
    if (_i === i) {
      el.classList.add("active");
    } else {
      el.classList.remove("active");
    }
  });
});
Akul Srivastava
  • 89
  • 4