html - 图像网格：悬停时所有暗淡，但鼠标悬停在其上。

Question

我有一个网格图像，当我将鼠标悬停在图像上时，我试图使所有图像变暗（不透明度变化），除了我鼠标悬停的图像

这是我正在使用的，但我只是更改了突出显示的不透明度

 #grid li a:hover img {
   opacity:0.3;  filter:alpha(opacity=30);
  }
  .... ...
  ...
<div class="portfolio">
  <ul id="grid">
   <li><a href="#"><img src="1.jpg"></a></li>
   <li><a href="#"><img src="2.jpg"></a></li>
    ....
       .....

Answer 1

将此添加到您的 CSS

#grid li a:hover img {
   opacity:1;  filter:alpha(opacity=100);
  }
 #grid:hover img {
   opacity:0.3;  filter:alpha(opacity=30);
  }

Answer 2

使用 jquery 这相当容易：

$('ul#grid img').on('mouseenter', function() {
    $('ul#grid img').fadeTo(0.3);
    $(this).fadeTo(1);
});
$('ul#grid img').on('mouseleave', function() {
    $(this).fadeTo(0.3);
});

编辑：仅使用 css 要好得多

Answer 3

当您悬停在子元素上时，将父元素定位为悬停。

见 JS 小提琴http://jsfiddle.net/feitla/PgUMY/

 #grid:hover li a img {
   opacity:0.3;  filter:alpha(opacity=30);
  }

 #grid li a:hover img {
   opacity:0.9;  filter:alpha(opacity=30);
  }