将鼠标悬停在 img 上时，所有其他图像都会使用 CSS :not(:hover) 进行模糊处理

Question

我正在尝试研究当一个图像悬停时如何在所有其他图像上应用模糊效果：

img:not(:hover) {
filter: blur(3px);
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">

我希望当前没有图像悬停时，所有图像都能正常渲染(即没有模糊效果)。但事实似乎并非如此，因为目前一切都模糊不清。

如何使用 CSS 实现此效果？

Answer 1

当你有一个包装元素时，这个技巧有效。

通过这种方式，您可以给出包装中所有照片的效果，除了:hover

的照片CSS简短版本：

#wrap img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
#wrap:hover img:not(:hover) {
filter: blur(3px);
}

<div id='wrap'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
</div>

---

CSS 旧式版本：

与上面相同，但使用更多的 CSS 代码

#wrap img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
#wrap:hover img {
filter: blur(3px);
}
#wrap img:hover {
filter: blur(0px);
}

<div id='wrap'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
</div>

---

JS 版本 1：

当对象之间的距离应该更宽时，最好使用 JS

var wrp = document.getElementById('wrap');
var img = wrp.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("mouseover", function () { setEffect(this); });
img[i].addEventListener("mouseout", resEffect);
};
function setEffect(el) {
for (var i = 0; i < img.length; i++) {
img[i].setAttribute('style', 'filter: blur(3px);');
};
el.removeAttribute('style');
}
function resEffect() {
for (var i = 0; i < img.length; i++) {
img[i].removeAttribute('style');
};
}

#wrap img {
margin: 0 30px;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

<div id='wrap'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
</div>

---

JS 版本 2：

与上面的"JS 版本 1"相同，但保留图像上的内联样式。此脚本保留图像的默认内联样式并为其添加效果！

var wrp = document.getElementById('wrap');
var img = wrp.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("mouseover", function () { setEffect(this); });
img[i].addEventListener("mouseout", resEffect);
};
function setEffect(el) {
for (var i = 0; i < img.length; i++) {
img[i].style.filter = 'blur(3px)';
};
el.style.filter = null;
}
function resEffect() {
for (var i = 0; i < img.length; i++) {
img[i].style.filter = null;
};
}

#wrap img {
margin: 0 30px;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

<div id='wrap'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img style="border: 5px solid blue;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
width="100px">
</div>

Answer 2

你甚至可以合并javaScript代码：-

1. 目录

• 为所有img添加id

<img id="1" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img id="2" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img id="3" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">

2. JavaScript

(() => {
let allImgElement = document.querySelectorAll('img')
allImgElement.forEach(img => {
// handle when mouse over (blurring other images)
document.getElementById(img.id).addEventListener("mouseover", () => {
allImgElement.forEach(imgBlur => {
if(imgBlur.id !== img.id) {
document.getElementById(imgBlur.id).classList.add("imgBlur")
}
})
})

// handle when mouse out (unblur other images)
document.getElementById(img.id).addEventListener("mouseout", () => {
allImgElement.forEach(imgUnblur => {
if(imgUnblur.id !== img.id) {
document.getElementById(imgUnblur.id).classList.remove("imgBlur")
}
})
})
})
})()

3.CSS

.imgBlur {

filter: blur(3px);

-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

(() => {
let allImgElement = document.querySelectorAll('img')
allImgElement.forEach(img => {
// handle when mouse over (blurring other images)
document.getElementById(img.id).addEventListener("mouseover", () => {
allImgElement.forEach(imgBlur => {
if(imgBlur.id !== img.id) {
document.getElementById(imgBlur.id).classList.add("imgBlur")
}
})
})

// handle when mouse out (unblur other images)
document.getElementById(img.id).addEventListener("mouseout", () => {
allImgElement.forEach(imgUnblur => {
if(imgUnblur.id !== img.id) {
document.getElementById(imgUnblur.id).classList.remove("imgBlur")
}
})
})
})
})()

.imgBlur {

filter: blur(3px);

-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

<img id="1" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img id="2" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">
<img id="3" src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">