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

Posted 2023-03-05

【中文标题】将鼠标悬停在 img 上时，所有其他图像都使用 CSS 模糊：not(:hover)

【英文标题】：When hover over img, all other images blur using CSS :not(:hover)

【发布时间】：2021-02-21 16:15:13

【问题描述】：

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

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

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

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

我希望当当前没有图像悬停时，所有图像都能正常渲染（即没有模糊效果）。但这似乎并非如此，因为此刻，一切都变得模糊了。

如何使用 CSS 实现这种效果？

【参考方案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"
        >

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

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

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

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

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

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

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

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRK7bvAryKdY7JSlepTHatE1A4nAVU5lJXkdw&usqp=CAU"
        >

</div>

【讨论】：

嘿，javascript 很好用，谢谢！但是有没有办法做到这一点，所以它不会删除现有的img样式？所以它不会替换与 img 相关的整个样式（只是将其集成到我的网站中），而只是在 img 的现有 css 之上添加模糊过滤器？

【参考方案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" >

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

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

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

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

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