Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

Question

Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

I have implemented a menu on my site in two different ways - one using text and the other using pictures. Users can click on both types of menus.

Now, I am looking to create an interactive feature where hovering over a specific item in the text menu (such as number 2) will automatically change the picture with the corresponding number (e.g. image under number 2).

Here is the code for the text menu:

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

And here is the code for the 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>

If you want to see how the Picture and text menus look together, check out this screen shot with Picture and text menu.

I would greatly appreciate any assistance or ideas on how to achieve this interactive functionality!

I have been searching for solutions that could help me identify the highlighted element by its number but haven't had much success so far. Any help would be highly appreciated!

javascript html jquery css wordpress

Answer 1

Answer №1

If you want to implement this behavior, here's how you can do it:

When hovering over a specific element, you can get the index of that element and use it to match with another element in the navigation. Once matched, you can choose to perform any action after the matching is completed.

$(".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 2

If you want to implement this behavior, here's how you can do it:

When hovering over a specific element, you can get the index of that element and use it to match with another element in the navigation. Once matched, you can choose to perform any action after the matching is completed.

$(".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

Answer №2

Looking for a pure JavaScript solution that works on elements not directly related by parent-child relationships using IDs? Here's an example:

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>

JavaScript

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'; // Any necessary style changes can be made here
}

Answer 4

Looking for a pure JavaScript solution that works on elements not directly related by parent-child relationships using IDs? Here's an example:

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>

JavaScript

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'; // Any necessary style changes can be made here
}

Answer 5

Answer №3

There are numerous solutions available, both with and without the use of libraries. Consider utilizing jQuery if feasible, or explore alternatives such as addeventlistener (the more advanced approach).

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

This link provides a good example of how to achieve your desired outcome.

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

The aforementioned code snippet is tailored for PHP but can also be adapted for use in a plugin. If you're working within a WordPress environment, it's essential to familiarize yourself with creating WP plugins. Experimenting in a separate environment before incorporating changes into your custom WP plugin is advised. Avoid modifying existing plugins or themes whenever possible, as this may lead to complications down the line. In the context of WordPress development, constructing a personalized plugin is highly recommended. If suitable, label your query under "wp-plugin".

Answer 6

There are numerous solutions available, both with and without the use of libraries. Consider utilizing jQuery if feasible, or explore alternatives such as addeventlistener (the more advanced approach).

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

This link provides a good example of how to achieve your desired outcome.

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

The aforementioned code snippet is tailored for PHP but can also be adapted for use in a plugin. If you're working within a WordPress environment, it's essential to familiarize yourself with creating WP plugins. Experimenting in a separate environment before incorporating changes into your custom WP plugin is advised. Avoid modifying existing plugins or themes whenever possible, as this may lead to complications down the line. In the context of WordPress development, constructing a personalized plugin is highly recommended. If suitable, label your query under "wp-plugin".

Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

Answer №1

Answer №2

Answer №3

Similar questions

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

CSS selector targeting an element based on the value of its table border

Update the CSS styles using properties specified within an object

Storing data using angular-file-upload

Refresh the click event on a newly added element in the backbone framework

Sending the parameter with the URL and receiving the response in return

Obtaining a Variable Element through Selector

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

Learn how to use Bootstrap to position my component below another component on the webpage

Using Angular 6's httpClient to securely post data with credentials

WordPress AJAX call results in a response code of zero

Prevent touch swiping on Bootstrap carousel in Safari

Error: JSON parsing failed due to an unexpected character 'W' at the beginning

Detecting browser reload in React/Typescript: A guide

Unable to showcase information in a jQuery UI popup through AJAX when initially presented

Synchronizing CSS3 Animation Events and Event Listeners in jQuery: A Complete Guide

Creating a render function that includes the img.src parameter requires careful thought and consideration

Guide on creating a toggle effect for a div with querySelector and addEventListener

Stop the loop in cypress

Adjust the size of the logo as the user scrolls