Onmouseover Function() To Access All Css Background-image Url() In Html Document?

Basically, I'm trying to assign a mouseover function() for all background-image url()'s on an HTML document. I want to be able to access/trigger each background-image url(), as th

Solution 1:

I am unsure what you are trying to accomplish, but you have many basic concepts wrong.

Below will select all the elements. It loops over the NodeList and checks to see if the element has the computed style. If it does not, it just ignores it. If it does, it adds an event listener to the element. When you mouse over the element, it logs the background image value.

Note: I did not fix the invalid 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;
}

<imgsrc="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"alt="guy"width="220"height="300"style="float:left; padding:20px"><imgsrc="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"alt="guy"width="220"height="300"style="float:left; padding:20px"><imgsrc="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"alt="guy"width="300"height="423"style="float:left"><p><divclass="rap"></div></p><p><divclass="rap"id="n"style="float:left; position: absolute; left:1800px; top:16px"></div></p><imgsrc="https://i.ibb.co/YjG8SgN/SG8ZEag.png"alt="guy"id="ki"width="367"height="644"style="float:left; position: absolute; left:930px; top:431px"><imgsrc="https://i.pinimg.com/originals/8f/a7/b9/8fa7b999f20538fe753013f69a8f441c.jpg"width="433"height="580"style="float:left; position: absolute; left:1300px; top:431px"><imgsrc="https://i.pinimg.com/originals/82/59/86/82598611fcf7003ca9cbd146085c3c1e.jpg"width="362"height="453"style="float:left; position: absolute; left:560px; top:431px"><imgsrc="https://i.imgur.com/AcodYxf.jpeg"width="183"height="229"style="float:left; position: absolute; left:300px"><divclass="os"></div><divclass="ra"></div><p><divclass="ra"style="float:left; position: absolute; left:1900px; top:4798px"></div></p><imgsrc="https://i.imgur.com/AcodYxf.jpeg"alt="guy"width="285"height="160"style="float:left; position: absolute; left: 1700px; top:16px"><imgsrc="https://i.imgur.com/AcodYxf.jpeg"alt="guy"width="285"height="160"style="float:left; position: absolute; left: 1700px; top:350px">