onmouseover 功能对某些 <img> 标签无响应？

如何解决onmouseover 功能对某些 <img> 标签无响应？

<body>
1 <img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300"
2   style="float:left; padding:20px">
3    <img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300"
4    style="float:left; padding:20px">
5    <img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
6    style="float:left">
   
   

  
7   <p><div class="rap"></div></p>
 
8   <p><div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div></p>
 
9  <img src="https://i.ibb.co/YjG8SgN/SG8ZEag.png" alt="guy" id="ki" width="367" height="644" 
10  style="float:left; position: absolute; left:930px; top:431px">
11  <img src="https://i.pinimg.com/originals/8f/a7/b9/8fa7b999f20538fe753013f69a8f441c.jpg" width="433" height="580" 
12    style="float:left; position: absolute; left:1300px; top:431px">
13    <img src="https://i.pinimg.com/originals/82/59/86/82598611fcf7003ca9cbd146085c3c1e.jpg" width="362" height="453" 
14    style="float:left; position: absolute; left:560px; top:431px">
15    <img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" 
16    style="float:left; position: absolute; left:300px">

     <div class="os"></div>
  
   
  
       

<p><div class="ra"></div>
   <p><div class="ra" style="float:left; position: absolute; left:1900px; top:4798px"></div></p>
   <img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160"
   style="float:left; position: absolute; left: 1700px; top:16px">
   <img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160"
   style="float:left; position: absolute; left: 1700px; top:350px">
   
   
   https://www.w3schools.com/css/css_image_transparency.asp

</body>

CSS 代码：

#n{
background-position: 40% 45%; 
}

.rap{
    background-image: url("https://i.imgur.com/rDDRGYE.jpg");
    background-attachment: sticky;
    background-position: 77% 45%;
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 40%;  
    color: lightcyan;
    background-color: slategrey;
}

.ra{
    background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
    background-attachment: sticky;
    background-position: 71% 90%;
    height: 630px;
    width: 100%;
    bottom: 100%;
    background-repeat: no-repeat;
    background-color: slategrey;
}

.os{
    height: 4350px;
    width:  100%;
    opacity: 0;
    background-color: slategrey; 
}

body {
 
  background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg");
  width: 2820 px;
  height: 2050 px;
  background-position-y: 80%;
  background-repeat: no-repeat;
  background-color: azure;
}

Javascript 代码：

 let links = document.querySelectorAll("[src],[href]");
links.forEach(link => {
  link.addEventListener("mouSEOver",e => {
    const href = e.target.href;
    const src = e.target.src;
      if (src) location.assign(src);
   
  });
});

我的目标是为这里的所有图像触发鼠标悬停功能。

到目前为止，这个鼠标悬停函数（）通常在标签上工作得很好。但是，从 HTML 代码第 9 到 16 行开始，鼠标悬停功能似乎无法立即对这些图像起作用。

如果幸运的话，它们需要很长时间才能触发，或者我必须将鼠标悬停在这些图像的顶部。然而，大多数情况下 onmouSEOver 不会为 HTML 第 9 - 16 行中的图像激活。什么是禁用这些图像的 onmouSEOver？

感谢您提供有用的答案。

解决方法

您传递的图像 url 在行加载 onmouseover 时出现问题：location.assign(src);。

拒绝在框架中显示“https://imgur.com/”，因为它将“X-Frame-Options”设置为“拒绝”。

由于您无法更改 X-Frame-Options，请尝试在图像 src 中加载不同的 url 或参考 here。

看起来不起作用的图像是：

您已加载 CSS 的那些（因此没有可供 JS 查找的 href 或 src HTML 属性），或
它们是被渲染在它们顶部的大型 CSS 加载 div 覆盖的图像，因此它们不能悬停。

我建议只将您的图像作为 HTML 标签包含并给它们一个 src 属性，以便您的 JS 函数可以查找它们。但是，请记住，在 JS 中更传统的查找方式是为其分配一个特定的类并查询该类而不是 src 属性。

<!-- Try making these img tags with src properties instead of loading them through CSS -->
<div><img class="rap" src="https://i.imgur.com/rDDRGYE.jpg"></img></div>

尝试上面的 HTML 解决方案，而不是像下面那样通过 CSS 加载它们。

.rap {
  background-image: url("https://i.imgur.com/rDDRGYE.jpg");
}