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

problem specifically occurring on tablets with fixed positioning

Aligning the last element within a list

Fuzzy division following a CSS transformation/animation

File.type cannot be obtained in IE 11 and IE Edge due to compatibility issues

Separate the iframe sessions

The menu on Android gets cut off by the status bar

Is there a different method like Calc() to create a static sidebar alongside content?

Spread out elements equally into columns

What is the best way to animate an element to slide down when it is hidden with

Generating CSS and PHP through Grunt

Unable to load images on website

Adjust the column count based on the screen size, Susy suggested

What is the process for retrieving the value of a text box using V-Model?

I would like to modify the text color of a disabled input field

Centering divs using iPad media queries does not seem to work properly

ms-card malfunctioning due to data issues

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

Deactivating a widget on one of my web pages

Converting text into HTML format using Nextjs and React

CSS is not referred to as animation