-1 

const bg = document.getElementsByTagName("*");
bg.forEach(bgi => {
  const b = bgi.computedStyleMap();
  const c = b.get('background-image');

  c.addEventListener("mouseover", e => {
    const img = e.target.c;
    if (c) location.assign(c);
  });
});
#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;
}
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423" style="float:left">




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

<p>
  <div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div>
</p>

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

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





<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">

基本上，我正在尝试为 HTML 文档上的所有背景图像 url() 分配一个鼠标悬停函数()。当我将鼠标悬停在一个链接上时，我希望能够访问/触发每个背景图像 url()，就好像它正在单击一个 href 链接一样。

我尝试应用 CSSImageValue，它是 CSS 对象模型 (CSSOM) 的一个子集。如何使此代码正常工作？

4

1 回答 1

0

我不确定您要完成什么，但是您有许多基本概念错误。

下面将选择所有元素。它遍历 NodeList 并检查元素是否具有计算的样式。如果没有，它只是忽略它。如果是这样，它会向元素添加一个事件侦听器。当您将鼠标悬停在元素上时，它会记录背景图像值。

注意：我没有修复无效的 HTML。

const elems = document.querySelectorAll("*");
elems.forEach(elem => {
  const bgImg = elem.computedStyleMap().get('background-image');
  if (bgImg.value === 'none') return;
  elem.addEventListener("mouseover", e => {
    console.log(bgImg.toString());
  });
});
#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;
}
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423" style="float:left">




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

<p>
  <div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div>
</p>

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

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





<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">

于 2021-07-01T19:25:47.087 回答