Question

我在网站上有许多元素，并希望在将鼠标悬停在它们上方时将它们模糊 - 只留下悬停的元素。

实现这一目标的简短方法是什么？我想出了这个愚蠢的代码：

$(function() {
  $('#a').hover(function() {
    $('#b, #c, #d, #e').addClass("blur");
  }, function() {
    $('#b, #c, #d, #e').removeClass("blur");
  }),

  $('#b').hover(function() {
    $('#a, #c, #d, #e').addClass("blur");
  }, function() {
    $('#a, #c, #d, #e').removeClass("blur");
  }),

  $('#c').hover(function() {
    $('#a, #b, #d, #e').addClass("blur");
  }, function() {
    $('#a, #b, #d, #e').removeClass("blur");
  }),

  $('#d').hover(function() {
    $('#a, #b, #c, #e').addClass("blur");
  }, function() {
    $('#a, #b, #c, #e').removeClass("blur");
  }),

  $('#e').hover(function() {
    $('#a, #b, #c, #d').addClass("blur");
  }, function() {
    $('#a, #b, #c, #d').removeClass("blur");
  });
});

由于产品：＆gt;

！

Answer 1

$('.my-class').hover(function() {
    $('.my-class').not(this).addClass('blur');
}, function() {
    $('.my-class').removeClass('blur');
});

http://jsfiddle.net/isherwood/7VzBf/

Answer 2

您可以使用:not - 选择器和CSS Filters对CSS执行此操作。

HTML：

<div></div>
<div></div>
<div></div>

CSS：

div:not(:hover) { 
    blur(1px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

http://codepen.io/anon/pen/zHxGn

这将选择每个不会悬停的元素并使用CSS过滤器将其模糊。该解决方案的问题在于浏览器支持目前相当有限：http://caniuse.com/#feat=css-filters

为了获得更广泛的支持，你需要像Foggy这样的东西 http://nbartlomiej.github.io/foggy/

您可以这样使用它：

// Set up blur on each element
$('div').foggy({blurRadius: 2, opacity: 1});

$('div').hover(function() {
  // Delete blur on mouseenter
  $(this).foggy(false);
}, function() {
  // Blur again on mouseout
  $(this).foggy({blurRadius: 2, opacity: 1})
});

http://codepen.io/anon/pen/yIotA

编辑：

如果你希望你的元素在你的其中一个上面悬停，你可以这样做：

$('div').hover(function() {
  // Blur every other element on mouse enter
 $('div:not(:hover)').foggy({blurRadius: 2, opacity: 1});
}, function() {
  // Delete Blur on mouse out
  $('div').foggy(false);
});

http://codepen.io/anon/pen/DJCBI

将一个类（在悬停时）添加到目标池，但不添加到悬停元素

2 个答案: