将鼠标悬停在图像上的另一个 div 上会中断我的 onmouseenter

Question

https://github.com/UneSaltedFish/landingpage.git（github link 查看完整 html/css/js）

我这里开发的是landing page，在右边的bar vector picture上，我使用了hover效果（当我进入这个图片的时候，会变成另外一个图片，上面会有两个可以点击的文字。）

<div class="rightCon">
   <img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
   <div id= "right1" class = "text"><a href="https://www.w3schools.com/"><pre>  2000<br>ARCHIVAL<br>  SITE<br></pre></a></div>
   <div id= "right2" class = "text"><a href="https://www.w3schools.com/"><pre>  2012<br>ARCHIVAL<br>  SITE<br></pre></a></div>
</div>

它看起来像这样。 img

这里是 css 代码：

a{
 color:black;
 text-decoration: none;
}
.rightCon {
 position: absolute;
 color: white;
}
#right1{
 z-index: 10;
 position: absolute;
 left:850px;
 top:150px;
 opacity: 0;
}
#right2{
 z-index: 10;
 position: absolute;
 left:853px;
 top:350px;
 opacity: 0;
}
.text{
 font-family: "Arial Rounded MT Bold", sans-serif;
 font-size: 30px;
}

和js代码

 function right2(){
 document.getElementById("right").src = "right2.png";
 document.getElementById("right1").style.opacity=1;
 document.getElementById("right2").style.opacity=1;
}
function right1(){
 document.getElementById("right").src = "right.png";
 document.getElementById("right1").style.opacity=0;
 document.getElementById("right2").style.opacity=0;
}

问题是当进入右侧区域时onmouseenter 起作用，但是当我进入右侧1 和右侧2 区域时，onmouseleave 起作用，这是我不想的。我希望这个悬停只在右进右出时有效。

在网上搜索后，我尝试将 div 设为 img 的子项，但我不知道如何将 img.And 设为子项我被困在这里了。

预先感谢您的所有帮助。

Answer 1

如果您希望事件发生在图像和其他兄弟姐妹上，您应该将事件侦听器放在他们的 parent 上。现在您将鼠标悬停在 parent 的任何位置，鼠标将保持不变。

<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
  <img o src="right.png" alt="right" class="right" id = "right">
  ...

其他选择纯css

.rightCon .details { 
  display: none;
}

.rightCon:hover .default { 
  display: none;
}

.rightCon:hover .details { 
  display: block;
}

<div class="rightCon">
   <img class="default" src="http://placekitten.com/g/400/200">
   <img class="details" src="http://placekitten.com/400/200">
   <div class="default">FOOOOOO</div>
   <div class="details">Meow</div>
</div>

将鼠标悬停在图像上的另一个 div 上会中断我的 onmouseenter

Hover over another div on a image will interrupt my onmouseenter

html

javascript

css

dom

onmouseover