当鼠标悬停在 img 上时，所有其他图像都会使用 CSS 进行模糊处理：not(:hover)

问题描述 投票：0回答：2

我正在尝试弄清楚当一张图像悬停时如何对所有其他图像应用模糊效果：

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 实现这种效果？

html css image hover blur
2个回答
6
投票

当你有一个换行元素时，这个技巧就有效。

通过这种方式，您可以得到包装中除其所在照片之外的所有照片的效果

: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://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        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://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        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://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        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://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img style="border: 5px solid blue;" src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

</div>

0
投票

您甚至可以合并 javaScript 代码：-

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.