将鼠标悬停在具有特定索引的元素上时，更改另一个具有相同索引的父元素的 styles

Question

I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.

I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).

Code for text menu:

<ul>
   <li class="page_item">
     <a href="#">Test 1</a>
   </li>
   <li class="page_item">
     <a href="#">Test 2</a>
   </li>
</ul>

Code for Pictures menu:

<div class="project__card project__card-design">

<div class="project__card-design-bigelem">
 <a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>
<div class="project__card-design-bigelem">
 <a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>
<div class="project__card-design-bigelem">
 <a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>

</div>

Screen shot with Picture and text menu: Screen shot with Picture and text menu

I will be grateful for any help!

Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don't even have ideas on how to do this.

All thanks in advance for any help!

Answer 1

Here's a solution with pure js, works for elements that are not parents using ids.

html

  <li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
  <div id="parent1"> </div>
  <li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
  <div id="parent2"> </div>
  <li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
  <div id="parent3"> </div>

and heres the js

function customHover(e){
  let id = e.target.id;
  let idNumber = id.slice(id.length - 1);
  document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}

function handleMouseLeave(e){
  let id = e.target.id;
  let idNumber = id.slice(id.length - 1);
  document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}

Answer 2

If you like for this behaviour you can do this

hover: nav1 > imageNav1 ect...

You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter

 $(".js-hover").on("mouseenter", function () { const hoverIndex = $(this).index(); const $imageListItems = $(".image-list > li"); $imageListItems.removeClass("image-list__item--selected"); $imageListItems.eq(hoverIndex).addClass("image-list__item--selected"); });

 .image-list__item--selected { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list"> <li class="js-hover">text</li> <li class="js-hover">text</li> <li class="js-hover">text</li> <li class="js-hover">text</li> </ul> <ul class="image-list"> <li>image1</li> <li>image2</li> <li>image3</li> <li>image4</li> </ul>

Answer 3

there are many solutions, with an without using libraries. I think you may use some jquery if possible, and if not you should search for addeventlistener (the advanced way)

https://api.jquery.com/hover/

is a good example of doing what you are trying todo.

var pageitemcount=0;
$( ".page_item" ).hover(function() {
  pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});

The above part is for php, still can be used in a plugin. If you are in wordpress environment, you have to dig into how to write wp plugins also. Trying to achieve this in an environment, and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.