При наведении курсора на один элемент запускается наведение курсора на другой контейнер

Question

Я бы хотел составить список ссылок, которые при наведении курсора трансформируют соответствующие изображения под ними. Если возможно, произойдет обратное при наведении курсора на одно из изображений (срабатывает эффект наведения соответствующей ссылки). До сих пор я находил способы сделать это только тогда, когда все элементы находятся в одном контейнере. Вот краткое описание того, что я получил:

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);
}

Answer 1

Я могу сделать только первую часть, где наведите указатель мыши на ссылку, чтобы масштабировать соответствующее изображение. 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: 33%; */
  /* float: left; */
  width: 100%;
  transition: transform .2s;
  position: absolute;
  top: 0;
  left: 0;
}

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

<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 2

Я не думаю, что вы можете сделать это с помощью одного CSS, но вы также отметили javascript, поэтому:

Вы можете сделать это с помощью mouseover и mouseout, что соответствует href; см. комментарии:

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

// Add a highlight to the hovered element (or its LI parent, if any), and any
// matching element by `href` attribute (or its LI parent, if any)
function handler(event) {
    const a = event.target.closest("a");
    if (a && this.contains(a)) {
        removeHighlight();
        // Note: It's important to use `getAttribute` here, not the reflected
        // `href` property, because `getAttribute` will return what's actually
        // in the attribute, but `href` will return a fully-resolved link
        document.querySelectorAll(`[href='${a.getAttribute("href")}']`).forEach(el => {
            const hl = el.parentElement.tagName === "LI" ? el.parentElement : el;
            hl.classList.add("highlight");
            console.log("Added to " + hl.tagName);
        });
    }
}

// Use event delegation to watch for mouseover and mouseout on the containers
const links = document.querySelector(".links");
links.addEventListener("mouseover", handler);
links.addEventListener("mouseout", removeHighlight);
const images = document.querySelector(".images");
images.addEventListener("mouseover", handler);
images.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>