Question

问题

当我使用javascript添加过滤器时，它会同时使用标准过滤器和悬停过滤器。所以我需要一种方法来重新启用悬停效果。

我希望能做什么

我试图制作一个黑白图片库，当你将鼠标悬停在它们上面时，它们会变色。然后用户应该能够按下图片，女巫应该模糊它们并在图片上显示它们的描述。然后，如果用户按下另一张图片，则应重置第一张图片。

制作我想要做的简单版本的代码：

Html代码

<a href="#"  onclick="return false" onmousedown="image_blur();">
  <img id="test_image" src="https://media.gettyimages.com/photos/evening-in-the-forest-picture-id494297755?b=1&k=6&m=494297755&s=612x612&w=0&h=2FxNtXQgUVOfGD-ndkq3mdnnxq2LABWKM-7MkSX3uZY=" alt="">
</a>

<a href="#"  onclick="return false" onmousedown="remove_blur();">
  <p>
    Reset
  </p>
</a>

CSS代码

p {
  padding: 10px;
  background-color: aqua;
}

#test_image {
  filter: grayscale(80%);
  -webkit-filter: grayscale(80%);
  -moz-filter:    grayscale(80%);
  -ms-filter:     grayscale(80%);
  -o-filter:      grayscale(80%);
}

#test_image:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter:    grayscale(0%);
  -ms-filter:     grayscale(0%);
  -o-filter:      grayscale(0%);
}

Javascript代码

function image_blur() {
  var background = document.getElementById("test_image");
  background.style.WebkitFilter= "blur(2px)";
  background.style.filter= "blur(2px)";
}

function remove_blur() {
  var background = document.getElementById("test_image");
  background.style.WebkitFilter= "grayscale(80%)";
  background.style.filter= "grayscale(80%)";
}

Answer 1

使用JS添加样式使它们内联，因此它们将始终覆盖CSS中定义的任何其他样式（甚至是hover样式），因此以这种方式处理它不是一个好主意。 / p>

而是考虑添加/删除定义样式的类。然后只需将模糊附加到灰度过滤器以应用它们。

＆＃13;

function image_blur() {
  var background = document.getElementById("test_image");
  background.classList.add('blur');
}

function remove_blur() {
  var background = document.getElementById("test_image");
  background.classList.remove('blur');
}

＆＃13;

p {
  padding: 10px;
  background-color: aqua;
}

#test_image {
  filter: grayscale(80%);
}

#test_image.blur {
  filter: grayscale(80%) blur(2px);
}

#test_image:hover {
  filter: grayscale(0%);
}

#test_image.blur:hover {
  filter: grayscale(0%) blur(2px);
}

＆＃13;

<a href="#" onclick="return false" onmousedown="image_blur();">
  <img id="test_image" src="https://media.gettyimages.com/photos/evening-in-the-forest-picture-id494297755?b=1&k=6&m=494297755&s=612x612&w=0&h=2FxNtXQgUVOfGD-ndkq3mdnnxq2LABWKM-7MkSX3uZY=" alt="">
</a>

<a href="#" onclick="return false" onmousedown="remove_blur();">
  <p>
    Reset
  </p>
</a>

＆＃13;

Answer 2

只是一些图片的简单例子

Codepen demo

<强>标记

<div class="gallery">
    <img src="https://...">
    <img src="https://...">
    <img src="https://...">
</div>

<强> CSS

img { filter: grayscale(80%); cursor: pointer; }
img:hover { filter: grayscale(0); }

img.selected { filter: grayscale(80%) blur(2px); }
img.selected:hover { filter: grayscale(0) blur(2px); }

<强>的Javascript

let gallery = document.querySelector('.gallery');
let currentSelection = gallery.querySelector('.selected');

gallery.addEventListener('click', function(ev) {
   let tgt = ev.target;
   if (tgt.nodeName.toLowerCase() === 'img') {

      if (currentSelection) {
         currentSelection.classList.remove('selected');
      }

      currentSelection = tgt;
      currentSelection.classList.add('selected');
   }

});

脚本检测到父元素中图像的点击（通过event delegation，这比为每个图像设置单个处理程序更高效），然后将selected类应用于图像本身和从先前选定的图像中删除该类（如果有）。该类在CSS中设置样式，以显示blur()过滤器。

注意，我已经清除了删除链接的标记，因为它们似乎实际上并未用于链接资源（我在点击时注意到你return false），

如何使用javascript

问题

我希望能做什么

2 个答案: