How to trigger an hover action in an outside element

Question

first time here...

So I try it my best with my limited knowledge to find a solution by myself but I couldn't so please I need your help on this:

How can I trigger a Hover effect on an non-related element (no parent, no child, no sibling)

This is the code I have:

<div id="projects">
  <section class="menu_projects">       
    <ul>
      <li class="1"><a></a></li>
      <li class="2"><a></a></li>
    </ul>
  </section>
  <section class="preview_projects">        
    <div id="preview"></div> 
  </section>
</div>

What I want is when I hover on "Class 1" the "#preview" change the background image and when I hover on "Class 2" the "#preview" change to another background image.

Any suggestion is welcome (CSS, Javascript, other). Thanks all!

Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Mitch Arseneau, Dec 16 '20 at 17:49
Mitch that doesn't answer my question because those elements are related — juan felipe botero calle, Dec 16 '20 at 18:03
Sergey Kuznetsov, yes If you know a method with Javascript show me please thanks! — juan felipe botero calle, Dec 16 '20 at 18:03
@juanfelipeboterocalle, I gave a solution to javascript. Check, pls. — s.kuznetsov, Dec 16 '20 at 18:46
@sergeykuznetsov thank you so much! it works great but what if instead of an image I want to load a video? — juan felipe botero calle, Dec 17 '20 at 01:26
@juanfelipeboterocalle, Hello. It doesn't make the task very difficult. You can use a ` — s.kuznetsov, Dec 17 '20 at 03:37

s.kuznetsov · Accepted Answer · 2020-12-16T18:51:46.033

So... Here is a solution for javascript.

I entered the images into an array, giving the variable name images. Next, using the forEach() method, I will determine the current li tag. And on event mousemove, I determine the index and pull up the corresponding image from the array.

And additionally... your class names li tags 1 and 2 are not valid for css. I have corrected to li_1 and li_2.

window.onload = function() {
let ul_li = document.querySelectorAll('ul li');
let preview = document.querySelector('#preview');
let images = ['https://s1.1zoom.ru/big0/697/Love_Night_Moon_Trees_Silhouette_Two_Dating_576752_1280x853.jpg', 'https://s1.1zoom.ru/big0/629/Love_Night_Moon_Trees_Silhouette_Two_Dating_574587_1280x853.jpg'];

  ul_li.forEach(function(ul_li_current, index) {
    ul_li_current.addEventListener('mousemove', function() {
      preview.style.backgroundImage = "url('"+ images[index] +"')";
    })
  })
}

#preview {
  width: 300px;
  height: 300px;
  background-size: cover;
}

<div id="projects">
  <section class="menu_projects">       
    <ul>
      <li class="li_1"><a>image 1</a></li>
      <li class="li_2"><a>image 2</a></li>
    </ul>
  </section>
  <section class="preview_projects">        
    <div id="preview"></div> 
  </section>
</div>

How to trigger an hover action in an outside element

1 Answers1