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

当你有一个 wrap 元素时，这个技巧就起作用了。

通过这种方式，您可以为包装中的所有照片添加效果，但它所在的那张除外 :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 Old-Style 版本：

与上面相同，但使用更多 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 代码：-

Html

将 id 添加到所有 img

<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">

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">

当悬停在 img 上时，所有其他图像使用 CSS 模糊：not(:hover)

When hover over img, all other images blur using CSS :not(:hover)

html

css

image

blur

hover