html - 当鼠标悬停在 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 version 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>