如何简化此代码？JavaScript+；css3

我对编程相当陌生，仍然掌握编程逻辑。我已经浪费了几个小时试图简化这个代码，但没有雪茄。考虑到编程的基础是简化任务，如何缩短以下代码

var card1=document.getElementById（'card1'）；
var card2=document.getElementById（'card2'）；
var card3=document.getElementById（'card3'）；
var card4=document.getElementById（'card4'）；
//卡1
card1.addEventListener（'mouseenter'，function（）{
card2.classList.add（'blur'）；
card3.classList.add（'blur'）；
card4.classList.add（'blur'）；
})
card1.addEventListener（'mouseleave'，function（）{
card2.classList.remove（'blur'）；
card3.classList.remove（'blur'）；
card4.classList.remove（'blur'）；
})
//卡2
card2.addEventListener（'mouseenter'，function（）{
card1.classList.add（'blur'）；
card3.classList.add（'blur'）；
card4.classList.add（'blur'）；
})
card2.addEventListener（'mouseleave'，function（）{
card1.classList.remove（'blur'）；
card3.classList.remove（'blur'）；
card4.classList.remove（'blur'）；
})
//卡片3
card3.addEventListener（'mouseenter'，function（）{
card1.classList.add（'blur'）；
card2.classList.add（'blur'）；
card4.classList.add（'blur'）；
})
card3.addEventListener（'mouseleave'，function（）{
card1.classList.remove（'blur'）；
card2.classList.remove（'blur'）；
card4.classList.remove（'blur'）；
})
//卡4
card4.addEventListener（'mouseenter'，function（）{
card1.classList.add（'blur'）；
card2.classList.add（'blur'）；
card3.classList.add（'blur'）；
})
card4.addEventListener（'mouseleave'，function（）{
card1.classList.remove（'blur'）；
card2.classList.remove（'blur'）；
card3.classList.remove（'blur'）；
})

您可以使用css伪选择器而不是javascript

.cards{
显示：网格；
网格模板列：重复（2，1fr）；
间隙：8px；
列表样式：无；
保证金：0；
填充：0；
指针事件：无；
}
李{
指针事件：自动；
}
.卡片：悬停>*{
过滤器：模糊（5px）；
过渡：过滤器。1s；
}
.cards>*{
填充：2rem；
利润率：8px；
背景：bisque；
}
.cards>*：悬停{
过滤器：无；
}

卡1
卡2
卡片3
卡4

您可以使用类而不是ID来获取所有卡的集合。然后可以在所有卡的容器上使用事件委派。当其中一张卡片被输入时，循环收集并模糊其余的卡片。当其中一张卡剩余时，循环收集并移除模糊：

const cards = document.querySelectorAll('.card');
container.addEventListener('mouseover', (e) => {
  if (e.target.matches('.card')) {
    for (const card of cards) {
      card.classList.add('blur');
    }
    e.target.classList.remove('blur');
  }
});
container.addEventListener('mouseout', (e) => {
  if (e.target.matches('.card')) {
    for (const card of cards) {
      card.classList.remove('blur');
    }
  }
});

请注意，要使事件委派起作用，必须使用冒泡的事件-

mouseover

和

mouseout

冒泡，但

mouseenter

和

mouseleave

不冒泡。（或者你可以在每张卡片上迭代，用

mouseenter

和

mouseleave

为每张卡片添加一个监听器）

例如，我们可以

var card1 = document.getElementById('card1');
var card2 = document.getElementById('card2');
var card3 = document.getElementById('card3');
var card4 = document.getElementById('card4');

var mouseenter = function(){
    if(this != card1) card1.classList.add('blur');
    if(this != card2) card2.classList.add('blur');
    if(this != card3) card3.classList.add('blur');
    if(this != card4) card4.classList.add('blur');
};
var mouseleave = function(){
    if(this != card1) card1.classList.remove('blur');
    if(this != card2) card2.classList.remove('blur');
    if(this != card3) card3.classList.remove('blur');
    if(this != card4) card4.classList.remove('blur');
};

card1.addEventListener('mouseenter', mouseenter);
card1.addEventListener('mouseleave', mouseleave);
card2.addEventListener('mouseenter', mouseenter);
card2.addEventListener('mouseleave', mouseleave);
card3.addEventListener('mouseenter', mouseenter);
card3.addEventListener('mouseleave', mouseleave);
card4.addEventListener('mouseenter', mouseenter);
card4.addEventListener('mouseleave', mouseleave);

试试下面的方法

const card1=document.getElementById（“card1”），
card2=document.getElementById（“card2”），
card3=document.getElementById（“card3”），
card4=document.getElementById（“card4”）；
//无鼠效应
const onMouse=（ele，type=“enter”）=>{
要素forEach（（项目）=>
类型==“输入”
？项。类列表。添加（“模糊”）
：item.classList.remove（“模糊”）
);
};
//卡1
card1.addEventListener（“mouseenter”，（）=>onMouse（[card2，card3，card4]）；
card1.addEventListener（“mouseleave”，（）=>
onMouse（[card2，card3，card4]，“离开”）
);
//卡2
card2.addEventListener（“mouseenter”，（）=>onMouse（[card1，card3，card4]）；
card2.addEventListener（“mouseleave”，（）=>
onMouse（[card1，card3，card4]，“离开”）
);
//卡片3
card3.addEventListener（“mouseenter”，（）=>onMouse（[card2，card1，card4]）；
card3.addEventListener（“mouseleave”，（）=>
onMouse（[card2，card1，card4]，“离开”）
);
//卡4
card4.addEventListener（“mouseenter”，（）=>onMouse（[card2，card3，card1]）；
card4.addEventListener（“mouseleave”，（）=>
onMouse（[card2，card3，card1]，“离开”）
);
。光标指针{
光标：指针；
}
h1{
字号：2em；
}
.模糊h1{
字号：1em；
文本对齐：居中；
颜色：透明；
文本阴影：111 0 0 15px；
过渡：0.4s；
}

文件
卡1
卡2
卡片3
卡4
OP希望对未悬停的元素执行某些操作，而另一个元素正在悬停，因此我认为
：hover
不会起作用。正确的。我误解了意图。但是你仍然可以使用：hover和父级或同级选择器来实现这一点，但是你不能使用CSS。例如，虽然您可以执行
.card:hover~.card
（将规则应用于被悬停的卡之后的卡），但您不能执行
.card~.card:hover
并将规则应用于被悬停的卡之后的卡card@PatrickRoberts很公平。OP的帖子中没有足够的信息来确定是否需要javascript来解决他的问题，在有具体需要之前，我倾向于使用纯css。如果OP想要详细说明，我可以更新或删除我的答案（这可能没有必要，因为这是一个非常可靠的js解决方案）。我添加了指针事件，从而解决了Parick Roberts指出的问题。回答得好，IMHO。当然这会简化现有代码，但不会消除不必要的重复。理想的解决方案不必为四张卡中的每一张重复相同的代码行。谢谢，德里克！这是一个非常好的解决方案，它就像一个魅力。谢谢回复！这有点奏效了。如果我将鼠标悬停在卡的中间，它将不起作用。但是，如果我将其悬停在其边界附近，它就会工作。这张卡片有内部填充物。而触发该功能的卡区正是p