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