javascript - 使用 javascript 或通过 css 突出显示另一个 div 上的元素

Question

我想达到这样的结果:

我想在鼠标悬停或悬停在左侧的元素上时突出显示右侧的元素。

我应该怎么做？是否可以通过 javascript 或 jquery 或 css

代码如下:

<div id="searchcontainer">

   <script>
   var html2;

    html2 += '<div id="rightcontainer">';
 html2 += '<img id="productimage" src="src/images/retrofit.png"/>';
  html2 += '<div id="imagedetail">';
   html2 += '<span class="details">Product Type</span>';
    html2 += '<span class="details">Version / Size</span>';
    html2 += '<span class="details">Estimated annual Spend</span>';
    html2 += '<span class="details">Site name / manufacturer</span>';
    html2 += '<span class="details">Selling Sales Eng</span>';
    html2 += '</div>'
   html2 += '</div>';
   </script>

</div>

这是我的 div 1

<div class="e-Marker"></div>

想象一下，div 1 是 map 上的一个标记，它位于日本、挪威和加拿大等地，这三个地方的信息显示在右侧显示的 div 上，我将标记悬停在日本，它将突出显示右侧与日本对应的信息。

谢谢(请尽可能简单地解释，因为我是 javascript 和 jquery 的初学者)

Answer 1

使用原生 JS:

document.getElementById("leftItem").addEventListener("mouseover", function() {
    document.getElementById("rightItem").style.border = "2px solid red";
}

或者，如果 rightItem 紧跟在 leftItem 之后，您可以使用纯 CSS:

<div id="leftItem>left</div>
<div id="rightItem>right</div>

#leftItem:hover + #rightItem {
    border: 2px solid red;
}