如何在外部元素中触发悬停动作

Question

第一次来...

所以我尽力用我有限的知识自己找到解决方案，但我不能，所以我需要你的帮助：

如何在不相关的元素（无父元素、无子元素、无兄弟元素）上触发悬停效果

这是我的代码：

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

我想要的是当我将鼠标悬停在“Class 1”时，“#preview”更改背景图像当我将鼠标悬停在“Class 2”上时，“#preview”会更改为另一个背景图像。

欢迎提出任何建议（CSS、Javascript、其他）。谢谢大家！

Answer 1

所以...这是 javascript 的解决方案。

我将图像输入到一个数组中，给出了变量名images。接下来，使用 forEach() 方法，我将确定当前的 li 标记。在事件 mousemove 上，我确定 index 并从数组中提取相应的图像。

此外...您的 class 名称 li 标签 1 和 2 对 css 无效。我已更正为 li_1 和 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

html

css

hover