正文

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

 2023-03-05  100

关键词：

【中文标题】将鼠标悬停在 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" >

【讨论】：

将鼠标悬停在 img 上时表格必须可见

】将鼠标悬停在img上时表格必须可见【英文标题】：Tablehastobevisiblewhilehoveringoverimg【发布时间】：2019-03-1416:39:54【问题描述】：这是我在StackOverflow上的第一篇文章。基本上，我正在尝试创建一个包含汽车图片和汽车信息的图片... 查看详情

将鼠标悬停在图像上时的音频

】将鼠标悬停在图像上时的音频【英文标题】：Audiowhenhoveroveranimage【发布时间】：2013-04-0807:53:28【问题描述】：当查看器悬停在不同的图像上时，我正在尝试播放多个音频文件，并且我不希望任何播放器/栏/功能显示在屏幕上，... 查看详情

当我将鼠标悬停在链接上时希望切换图像

】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情

将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情

仅当我将鼠标悬停在其上时如何使图像出现

】仅当我将鼠标悬停在其上时如何使图像出现【英文标题】：HowtomakeimageappearonlywhenIhoveronit【发布时间】：2020-02-0810:31:23【问题描述】：我希望我的图像仅在我将鼠标悬停时出现，我尝试将它放在样式部分但它不起作用。这段代... 查看详情

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情

将鼠标悬停在容器上时的 CSS 变换图像

】将鼠标悬停在容器上时的CSS变换图像【英文标题】：CSStransformimagewhenhoveroveracontainer【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一... 查看详情

将鼠标悬停在图像链接上时显示文本

】将鼠标悬停在图像链接上时显示文本【英文标题】：ShowingTextWhenHoveringOveranImageLink【发布时间】：2013-08-2720:04:16【问题描述】：我已经看过这里(Howtoshowtextonimagewhenhovering?)以找到解决此问题的方法，但它不能100%起作用...因为该... 查看详情

jQuery img 不透明度/图层悬停？

...3-04-1508:56:49【问题描述】：我在链接中有一个img，当您将鼠标悬停在它上面时，它会在顶部显示一个彩色/不透明层。除了我需要图像的名称来淡出之外，它工作正常。因此图像会自行启动，但是当您将鼠标悬停在不透明颜色上... 查看详情

将鼠标悬停在 li 上时如何更改所有字体颜色

】将鼠标悬停在li上时如何更改所有字体颜色【英文标题】：Howtochangeallfontcolorwhenhoveringoveranli【发布时间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有... 查看详情

当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

】当用户使用JQuery将鼠标悬停在链接上时如何显示图像【英文标题】：HowdoIdisplayanimagewhenauserhoversoveralinkusingJQuery【发布时间】：2011-05-2019:38:28【问题描述】：我有一份产品清单。<ul><li><ahref="chair.php">CHAIR</a></... 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

将鼠标悬停在css上时如何暂停幻灯片自动播放？

】将鼠标悬停在css上时如何暂停幻灯片自动播放？【英文标题】：Howtopauseslidesautoplaywhenyouhoveroverincss?【发布时间】：2021-10-1815:53:06【问题描述】：我有两个问题正在尝试解决，但没有成功。我正在尝试在动画中放置超过5张图片... 查看详情

jQuery - .hover() 不悬停时改回 img = 错误的 img

...显示，第二个在悬停在图像上时显示。问题是，如果我将鼠标悬停在一个产品图像上并快速移动到另一个产品图像，那么第一个产品图像会得到查看详情

将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发

】将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发【英文标题】：Hoveroverimagetoshowbuttonsanddon\'ttriggerwhenhoveringoveractualbuttons【发布时间】：2011-04-2604:33:55【问题描述】：我试图让按钮在悬停在图像上时出现。以... 查看详情

悬停在列表项上时更改背景图像

...在这个列表的div有一个背景图像。我想要做的是每当我将鼠标。请注意，每个项目都应将背景更改为不同的图像。我该怎么做呢？我只找到了如何更改为单个而不是多个图像的答案。这是屏幕截图。我已经将鼠标悬停查看详情

将鼠标悬停在一张图片上时，更改另外 2 张图片

】将鼠标悬停在一张图片上时，更改另外2张图片【英文标题】：Whenhoveringoveroneimage,changeanother2images【发布时间】：2013-06-2705:32:34【问题描述】：我有一个形状笨拙的导航栏，事实证明它很难使用鼠标悬停效果。基本上，当我将... 查看详情