When hovering over one item, it causes a hover effect on an item in a SEPARATE container

Question

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are within the same container. Here is an overview of my current setup:

HTML:

<ul class="links">
  <li><a href="https://...1">LINK 1</a></li> 
  <li><a href="https://...2">LINK 2</a></li>
  <li><a href="https://...3">LINK 3</a></li>
</ul>
<div class="images">
  <a href="https://...1">
    <img src="1.png">
  </a> 
  <a href="https://...2">
    <img  src="2.png">
  </a>
  <a href="https://...3">
    <img class="ssoverview" src="3.png">
  </a>
</div>

CSS:

a:hover {
    cursor: pointer;
}

.images a img {
    width: 33.33%;
    float: left;
    transition: transform .2s;
}

.images a img:hover {
    transition: transform .2s;
    transform: scale(1.4);
}

html css

Answer 1

Answer №1

In my opinion, achieving this solely with CSS may not be possible; however, since you have also included the javascript tag, here is a JavaScript solution:

You can implement this functionality using the mouseover and mouseout events, matching elements based on their href attribute. Here is the code logic explained:

// Remove any existing highlight
function removeHighlight() {
    document.querySelectorAll(".highlight").forEach(element => {
        element.classList.remove("highlight");
    });
}

// Add a highlight to the hovered element (or its parent LI, if available) as well as any
// matching element with the same `href` attribute (or its parent LI, if available)
function handler(event) {
    const link = event.target.closest("a");
    if (link && this.contains(link)) {
        removeHighlight();
        // Note: Using `getAttribute` is crucial here instead of the reflected
        // `href` property to ensure it returns the attribute value, not the fully-resolved link
        document.querySelectorAll(`[href='${link.getAttribute("href")}']`).forEach(element => {
            const highlightedElement = element.parentElement.tagName === "LI" ? element.parentElement : element;
            highlightedElement.classList.add("highlight");
            console.log("Added to " + highlightedElement.tagName);
        });
    }
}

// Implement event delegation to monitor mouseover and mouseout actions on designated containers
const linksContainer = document.querySelector(".links");
linksContainer.addEventListener("mouseover", handler);
linksContainer.addEventListener("mouseout", removeHighlight);
const imagesContainer = document.querySelector(".images");
imagesContainer.addEventListener("mouseover", handler);
imagesContainer.addEventListener("mouseout", removeHighlight);

.highlight {
    border: 1px solid red;
}

<ul class="links">
  <li><a href="https://...1">LINK 1</a></li> 
  <li><a href="https://...2">LINK 2</a></li>
  <li><a href="https://...3">LINK 3</a></li>
</ul>
<div class="images">
  <a href="https://...1">
    <img src="1.png">
  </a> 
  <a href="https://...2">
    <img  src="2.png">
  </a>
  <a href="https://...3">
    <img class="ssoverview" src="3.png">
  </a>
</div>

Answer 2

In my opinion, achieving this solely with CSS may not be possible; however, since you have also included the javascript tag, here is a JavaScript solution:

You can implement this functionality using the mouseover and mouseout events, matching elements based on their href attribute. Here is the code logic explained:

// Remove any existing highlight
function removeHighlight() {
    document.querySelectorAll(".highlight").forEach(element => {
        element.classList.remove("highlight");
    });
}

// Add a highlight to the hovered element (or its parent LI, if available) as well as any
// matching element with the same `href` attribute (or its parent LI, if available)
function handler(event) {
    const link = event.target.closest("a");
    if (link && this.contains(link)) {
        removeHighlight();
        // Note: Using `getAttribute` is crucial here instead of the reflected
        // `href` property to ensure it returns the attribute value, not the fully-resolved link
        document.querySelectorAll(`[href='${link.getAttribute("href")}']`).forEach(element => {
            const highlightedElement = element.parentElement.tagName === "LI" ? element.parentElement : element;
            highlightedElement.classList.add("highlight");
            console.log("Added to " + highlightedElement.tagName);
        });
    }
}

// Implement event delegation to monitor mouseover and mouseout actions on designated containers
const linksContainer = document.querySelector(".links");
linksContainer.addEventListener("mouseover", handler);
linksContainer.addEventListener("mouseout", removeHighlight);
const imagesContainer = document.querySelector(".images");
imagesContainer.addEventListener("mouseover", handler);
imagesContainer.addEventListener("mouseout", removeHighlight);

.highlight {
    border: 1px solid red;
}

<ul class="links">
  <li><a href="https://...1">LINK 1</a></li> 
  <li><a href="https://...2">LINK 2</a></li>
  <li><a href="https://...3">LINK 3</a></li>
</ul>
<div class="images">
  <a href="https://...1">
    <img src="1.png">
  </a> 
  <a href="https://...2">
    <img  src="2.png">
  </a>
  <a href="https://...3">
    <img class="ssoverview" src="3.png">
  </a>
</div>

Answer 3

Answer №2

My expertise lies in the initial part of this code snippet, where I utilize hover to scale the corresponding image when a link is hovered over. This implementation requires the use of jQuery.

$(document).ready(function() {
  $('.links li a').hover(
    function() {
      var setRelation = $(this).data('relation');
      var aImg = $('.images a').find('#' + setRelation);
      aImg.css('z-index', '1');
      aImg.css('transform', 'scale(1.4)');
    },
    function() {
      var setRelation = $(this).data('relation');
      var aImg = $('.images a').find('#' + setRelation);
      aImg.css('z-index', 'unset');
      aImg.css('transform', 'scale(1.0)');
    });
});

a:hover {
  cursor: pointer;
}

.images {
  display: flex;
}

.images a {
  flex: 1;
  position: relative;
}

.images a img {
  width: 100%;
  transition: transform .2s;
  position: absolute;
  top: 0;
  left: 0;
}

.images a img:hover {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul class="links">
  <li><a data-relation="link1" href="https://...1">LINK 1</a></li>
  <li><a data-relation="link2" href="https://...2">LINK 2</a></li>
  <li><a data-relation="link3" href="https://...3">LINK 3</a></li>
</ul>

<div class="images">
  <a href="https://...1">
    <img id="link1" src="https://picsum.photos/id/11/500">
  </a>
  <a href="https://...2">
    <img id="link2" src="https://picsum.photos/id/12/500">
  </a>
  <a href="https://...3">
    <img id="link3" class="ssoverview" src="https://picsum.photos/id/13/500">
  </a>
</div>

Answer 4

My expertise lies in the initial part of this code snippet, where I utilize hover to scale the corresponding image when a link is hovered over. This implementation requires the use of jQuery.

$(document).ready(function() {
  $('.links li a').hover(
    function() {
      var setRelation = $(this).data('relation');
      var aImg = $('.images a').find('#' + setRelation);
      aImg.css('z-index', '1');
      aImg.css('transform', 'scale(1.4)');
    },
    function() {
      var setRelation = $(this).data('relation');
      var aImg = $('.images a').find('#' + setRelation);
      aImg.css('z-index', 'unset');
      aImg.css('transform', 'scale(1.0)');
    });
});

a:hover {
  cursor: pointer;
}

.images {
  display: flex;
}

.images a {
  flex: 1;
  position: relative;
}

.images a img {
  width: 100%;
  transition: transform .2s;
  position: absolute;
  top: 0;
  left: 0;
}

.images a img:hover {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul class="links">
  <li><a data-relation="link1" href="https://...1">LINK 1</a></li>
  <li><a data-relation="link2" href="https://...2">LINK 2</a></li>
  <li><a data-relation="link3" href="https://...3">LINK 3</a></li>
</ul>

<div class="images">
  <a href="https://...1">
    <img id="link1" src="https://picsum.photos/id/11/500">
  </a>
  <a href="https://...2">
    <img id="link2" src="https://picsum.photos/id/12/500">
  </a>
  <a href="https://...3">
    <img id="link3" class="ssoverview" src="https://picsum.photos/id/13/500">
  </a>
</div>

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

Answer №1

Answer №2

Similar questions

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

How to retrieve the dimensions of an image for a specified CSS class with Selenium or PIL in Python

preserving the current state even after refreshing the page

Variety of perspectives on Magento products

Choosing a root element in a hierarchy without affecting the chosen style of a child

What is the reason that setting the margin of 0 on the body does not eliminate the margin on an h1 element?

What is the method for incorporating a button on an HTML webpage that triggers a server-side script to execute?

The validation of radio input signals results in an error being returned

Issue with form action failing to properly refresh

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

Issues with the Dropdown Menu

What could be causing my insertRow function to inject empty cells into my table?

Creating a HTML element that functions as a text input using a div

The page refreshes when the anchor element is clicked

Is it feasible to utilize the .fadeTo() function in jQuery multiple times?

Clicking on the images will display full page versions

error occurred while trying to upload a file

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

Scroll effortlessly with wrapping divs