onmouseover 函数对某些 <img> 标签没有反应？

Question

HTML代码：

<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);
   
  });
});

我的目标是为此处的所有图像触发 onmouseover 功能。

到目前为止，这个 mouseover function() 通常在标签上运行良好。但是，从 HTML 代码行 9 - 16 开始，鼠标悬停功能似乎无法立即对这些图像起作用。

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

感谢您提供有用的答案。

Answer 1

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

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

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

Answer 2

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

你用 CSS 加载的（因此没有 href 或 src HTML 属性供 JS 查找），或
它们是被渲染在它们上面的 CSS 加载的大 div 覆盖的图像，因此它们不可悬停。

我建议只将您的图像包含为 HTML 标签，并为它们提供 src 属性，以便您的 JS 函数可以查找它们。但是，请记住在 JS 中查找它的更传统的方法是为其分配一个特定的 class 并查询 class 而不是 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");
}

onmouseover 函数对某些 <img> 标签没有反应？

onmouseover function unresponsive to certain <img> tags?

html

javascript

css

image

onmouseover