如何更改此脚本以使其适用于具有相同类的许多元素(对于博客),它仅适用于第一个元素,当您将鼠标悬停在后续元素上时什么也不会发生。
let [frontBlock, backBlock] = [
document.querySelector('.frontBlock'), document.querySelector('.backBlock'), 0
]
frontBlock.addEventListener('mouseover', (e) => {
if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div') && e) {
e.target.closest('div').style.display = 'none';
backBlock.style.display = 'block';
}
})
backBlock.addEventListener('mouseout', (e) => {
if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div')) {
e.target.closest('div').style.display = 'none';
frontBlock.style.display = 'block';
}
})
那些。这是博客代码,对于第一个容器,此脚本有效,当您将鼠标悬停在第二个和后续容器上时,没有任何反应
<div class="container">
<div class="frontBlock">
<img src="1.jpg">
</div>
<div class="backBlock">
<img src="2.jpg">
</div>
</div>
<div class="container">
<div class="frontBlock">
<img src="3.jpg">
</div>
<div class="backBlock">
<img src="4.jpg">
</div>
</div>
一个块在另一个上面。
.container{
position: relative;
}
.frontBlock{
position: absolute;
}
.backBlock{
z-index: 9;
}
你可以做这样的事情..
document.querySelectorAll('.frontBlock')
返回一个集合即[<div class="frontBlock">frontBlock</div>, <div class="frontBlock">frontBlock</div>]
.document.querySelector('.frontBlock')
他会返回遇到的第一个<div class="frontBlock">frontBlock</div>
..没有js的选项