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);
  }

图像网格：悬停所有暗淡但是鼠标悬停在它上面。

3 个答案: