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";
}
});
})
});
答案 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
类。从性能的角度来看,这不是理想的选择,但除此之外,还需要维护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>