https://codepen.io/m4rsibar/pen/zyPBoz?editors=0110
我已经制作了一个代码库示例，说明了我想要的效果（我在css部分的最顶部包含了创建效果的代码），不过我想在javascript中做到这一点。（除非有一种方法可以解决我在CSS版本中遇到的问题）
问题是：将鼠标悬停在包含圆形元素的div上，如果将鼠标悬停在div中，并且不在某个元素的顶部，则它们都会消失。
我在CSS中使用：not选择器来实现此目标，并将其放在父元素上，这是我知道如何使其正常工作的唯一方法，我尝试过尝试并进行一些改动，无济于事，所以我决定使用javascript执行此操作。
在另一个Codepen中，我试图尽可能简化以达到我想要的效果。到目前为止我还没有：https : //codepen.io/m4rsibar/pen/yGPqZM
如您所见，当您离开盒子时，它并没有回到原始的不透明度。
我应该使用类并切换它们吗？
let lis= document.querySelectorAll('li')
console.log(lis)
lis.forEach(function(li) {
li.addEventListener("mouseover", function(e) {
lis.forEach(function(li) {
e.target.style.opacity="1";
if(e.target.style.opacity==="1"){
li.style.opacity="0.3";
}else{
li.style.opacity="1";
}
});
})
});
这是一种仅使用CSSno的行的更简单方法JavaScript。因为opacity: 1是隐式的，所以我们根本不必声明所有样式，只需声明非悬停状态的样式即可。
li {
list-style: none;
background-color: pink;
margin: 2px;
height: 200px;
width: 200px
}
ul {
display: flex;
}
li:not(:hover) {
opacity: 0.3;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>更新资料
在收到您的反馈和最新示例之后，我再次尝试了一下。我的目标是避免active在ul和上都使用双重课程li。这不是从性能的角度理想的，但除此之外，它更JavaScript和CSS维护。
我想到的是一个功能，该功能可检测anli是否为当前目标（鼠标位于内ul）。如果当前目标不是“ a”，li则表示我们ul处于活动状态，但没有儿童在徘徊。我相应地切换课程。我喜欢所有内容都存储在中，ul并且我们不再需要任何li事件跟踪。
var ul = document.querySelector('ul');
function boxEnter(e) {
this.classList.add('active');
}
function boxLeave(e) {
this.classList.remove('active');
}
function boxMove(e) {
this.classList.toggle('childrenInactive', e.target.tagName !== 'LI');
}
ul.addEventListener('mousemove', boxMove);
ul.addEventListener('mouseenter', boxEnter);
ul.addEventListener('mouseleave', boxLeave);li {
list-style: none;
background-image: url('https://source.unsplash.com/collection/1163637/200x200');
border-radius: 50%;
margin: 2px;
height: 200px;
width: 200px;
transition: .3s ease;
cursor: crosshair;
will-change: filter, transform;
}
ul {
display: flex;
flex-wrap: wrap;
}
ul.active li {
opacity: .3;
transform: scale(1.1);
filter: blur(5px);
}
ul li:hover,
ul.active.childrenInactive li {
opacity: 1;
transform: scale(1);
filter: blur(0);
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句