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

时间:2019-01-01 02:11:27

标签: javascript html css

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

1 个答案:

答案 0 :(得分:3)

这是一种更简单的方法,仅使用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类。从性能的角度来看,这不是理想的选择,但除此之外,还需要维护JavaScriptCSS

我想到的是一个检测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/