[英]How to detect the element i clicked on from an array
我正在尝试在我有一堆照片的地方制作这个项目。 我想这样做,以便每当我在照片上的 hover 时 < i > 元素显示为块(默认为无)。 我不知道如何制作它..我使用的所有东西都让它显示了所有 i 元素。 这是 javaScript 代码。
JavaScript
var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e) {
e.addEventListener("mouseover", function () {
for (var i = 0; i < plus.length; i++)
plus[i].style.display = "block"
})
e.addEventListener("mouseout", function () {
for (var i = 0; i < plus.length; i++)
plus[i].style.display = "none"
})
})
HTML
<div class="row poze">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1517343985841-f8b2d66e010b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1561140895-9d144461935e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e, i) {
e.addEventListener("mouseover", (function (newI) {
return function() {
plus[newI].style.display = "block"
}
})(i))
e.addEventListener("mouseout", (function (newI) {
return function() {
plus[newI].style.display = "none"
}
})(i))
})
您可以做的简单技巧是在鼠标输入事件上添加一个 class 说在 poza 元素数组中的每个元素中的悬停效果。 然后在 css 中使用以下规则
i {
display: none;
}
.hover-effect+i {
display: 'block';
}
在鼠标离开时移除 class。 这种方法将整洁干净。
(参见 + 选择器的文档)
您可以从addEventListener
作为event.target
获取它,一种可能的解决方案应该是:
poza.forEach(function (e) {
e.addEventListener("mouseover", function (event) {
event.target.style.display = "block"
})
e.addEventListener("mouseout", function (event) {
event.target.style.display = "none"
})
})
看看有没有帮助;D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.