Question

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";
         } 
    });
  })
});

Answer 1

这是一种更简单的方法，仅使用CSS行而不使用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>

更新

在收到您的反馈和latest example后，我再次尝试了一下。我的目标是避免在active和活动ul上都使用双重li类。从性能的角度来看，这不是理想的选择，但除此之外，还需要维护JavaScript和CSS。

我想到的是一个检测li是否为当前目标的函数（鼠标位于ul内的某个位置）。如果当前目标不是 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>

http://jsfiddle.net/j3reaqsw/

如何使节点列表中除目标元素之外的所有元素消失？

1 个答案: