-1

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!

3
  • is there some kind of relation that you have data to what image has the number two?
    – Dejan.S
    Jun 10, 2020 at 18:14
  • Thanks for the current solutions, but that’s not exactly what I want. The item number in the text menu is taken from WordPress and I can’t track which one or add my own. I need to understand which element the user hover over from the text menu. And do actions with the picture under the same number, but in a different menu. I use JQuery in my project. I hope now I clearly explained what I want to implement. If clarifications will be necessary, ask, I will prompt. I will add screenshot with my menu for you.
    – Dan
    Jun 10, 2020 at 18:46
  • So you want to to highlight the picture nr two if if the item if you hover on item nr two in the text menu, hover nr 1 > nr 1 image ect?
    – Dejan.S
    Jun 10, 2020 at 19:30

3 Answers 3

0

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>

1
  • Thank you so much! This is exactly what I was looking for :)
    – Dan
    Jun 10, 2020 at 21:20
0

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
}
-1

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.

7
  • this code doesn't solve anything that the op wants?
    – Dejan.S
    Jun 10, 2020 at 18:19
  • to solve the problem of op , we need to know the platform , what he can or can not use for solution. Why don't you just wait for the owner of the question to clarify if this was enough for him ?
    – murat aka
    Jun 10, 2020 at 18:26
  • Thanks for the current solutions, but that’s not exactly what I want. The item number in the text menu is taken from WordPress and I can’t track which one or add my own. I need to understand which element the user hover over from the text menu. And do actions with the picture under the same number, but in a different menu. I use JQuery in my project. I hope now I clearly explained what I want to implement. If clarifications will be necessary, ask, I will prompt.
    – Dan
    Jun 10, 2020 at 18:46
  • Because your solution was adding a class to the parent on hover, which was clearly not what op was asking for.
    – Dejan.S
    Jun 10, 2020 at 19:32
  • in wp environment , accessing wp side variables is difficult ,try if you can solve your problem on pure js try to achieve it with js, if not , you possibly should better write a custom plugin.
    – murat aka
    Jun 10, 2020 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.