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">В принципе, я пытаюсь назначить функцию наведения мыши() для всех URL-адресов фонового изображения() в HTML-документе. Я хочу иметь возможность доступа/активации каждого URL-адреса фонового изображения(), как если бы он щелкал ссылку href, когда я наводил указатель мыши.
Я попытался применить CSSImageValue, подмножество объектной модели CSS (CSSOM). Как заставить этот код работать?
Почему свойство css имеет прослушиватель событий.... Вы должны привязывать событие к элементу, а не к свойству css
ваш html недействителен....
@MisterJojo почему?
@epascarello, я понимаю, что вы имеете в виду, особенно в отношении вашего второго предложения. Мне просто нужна была помощь в этом.
Зачем? количество строк, баланс
<p>, ссылка ниоткуда...Вы задали этот вопрос семь раз. Вы получите огромную пользу от курса по основам JS.
getElementsByTagNameвозвращаетHTMLCollection, у которого нет функцииforEach.querySelectorAllвозвращаетNodeList, который имеет функциюforEach.Кажется, если бы этот код действительно работал, то при наведении курсора на элемент с фоновым изображением он переходил бы к этому изображению. Сказать, что это было бы неожиданным пользовательским опытом, было бы мягко сказано.