鼠标悬停在没有背景图像的 <div> 空白区域上时，onmouseover 函数转到元素的背景图像：url？

编程问答 2022-04-27

问题描述

这个 Javascript 代码有两个问题。 （感谢 redditor u/Symboltic 向我建议了这里的 javascript 代码。我很欣赏他的建议，只是想让它在更多编码情况下更适用和通用）

第一个问题：

虽然以下 javascript 代码确实起作用，但通过鼠标悬停转到背景图像： url() ，不幸的是，鼠标悬停在其背景颜色或一般的空白区域上，也会转到背景-图像：网址（）。

对于标签，当鼠标仅位于元素的背景图像上时，如何启用鼠标悬停函数（），该函数会转到背景图像：url（）？

第二个问题：

当我将鼠标悬停在标签中的背景图像上时，标签上的鼠标悬停不知何故不会转到背景图像：url()。这种情况很少发生，如果有的话。

当鼠标悬停在任何背景图像上时，我希望鼠标悬停能够转到正文标签中的背景图像链接：url()。 （无论我将来可能会放入多少个 background-image: url() 。

感谢您提供所有有用的答案。

Javascript 代码

document.addEventListener('mouSEOver',({ target }) => {
const { backgroundImage } = getComputedStyle(target);      

if (!backgroundImage.startsWith('url(')) return
      
let extractedUrl = backgroundImage         
    .slice(4,-1)         
.replace(/^["']|["']$/g,'');   
   
location.assign(extractedUrl); 
});

HTML 代码：

 <style>

#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%;
    
    background-repeat: no-repeat;
background-color: slategrey;

}

.os{
    height: 5000px;
     width: 9000px;
  
     
}
        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"),url("https://i.ibb.co/1KL4Kdj/op.png");
  width: 2820px,1920px;
  height: 2050px,1080px;
  background-position-y: 35%,4%; 
  background-position-x: 0%,-3500%;
  background-repeat: no-repeat;
  background-color: azure;
}


    </style>
</head>
<body>
    <img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"
    style="float:left; position: absolute; left:7800px; top:60px;">
    <img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" 
    style="float:left">
    <img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
    style="float:left">
    <img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"
    style="float:left; position: absolute; left:5000px; top:7000px;">>
    

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

<div class="ra"></div>
    
   
    
  
    
   
</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

background-imagecss-selectorsjavascriptmouseover