Javascript 悬停更改图像上的垂直导航

我正在努力找到一个简单的解决方案来创建如下div导航：

右边带有图像的div会在左菜单的悬停处更改并保留该div，即使您用鼠标移动到其他地方。但是左菜单本身，当它被点击时，链接到另一个页面

一定是这样的：

<ul>
<li> <a id="link1" href="example.de/abc" target="_blank">example 1</a></li>
<li> <a id="link2" href="example.de/def" target="_blank">example 2</a></li>
<li> <a id="link3" href="example.de/ghi" target="_blank">example 3</a></li>
</ul>

<div id="example1" class="hide"> Image, Text and Button</div>
<div id="example2" class="hide"> Image, Text and Button</div>
<div id="example3" class="hide"> Image, Text and Button</div>

JS

---

作为一个初学者，我不太确定如何做到这一点，或者这是否是一个好的解决方案。如果你们能帮助我，我将非常感激。多谢各位

试试这样的东西

函数openCityevt，cityName{ var i，tabcontent，tablinks； tabcontent=document.getElementsByClassNametabcontent； 对于i=0；i如果您能为您的案例创建代码片段或工作示例，它将帮助您和其他寻求帮助的成员

.hide {
  position: absolute;
}
#example1 {
   z-index: 50;
}
#example3, #example2 {
   z-index: 10;
}

$("HOVEREDLINK").hover(function() {
  $("HOVEREDLINK").css("z-index","70")
  $("ALLOTHERIDS").css("z-index","50")
});