Javascript改变一切的不透明度但仍然是图像

Question

http://vanhoesenarchitecture.com/completed-works/

我搜索过并找到了一些选项，但没有一个可行。另外，在我的例子中，他们不是兄弟姐妹，所以我努力让这个工作。这是我正在使用的代码：

(function($){
  jQuery('img').hover(function() {
    jQuery('img').not(this).addClass('hovered');
    console.log("HOVERED");
  }, function() {
    jQuery('img').removeClass('hovered');
    console.log("NOT HOVERED");
  });
})(jQuery);

CSS：

.hovered {opacity: 0.5;filter: alpha(opacity=50);}

非常感谢任何帮助！

Answer 1

＆＃13;

＆＃13;

/*(function($) {
  jQuery('img').hover(
    function() {
      jQuery('img').not(this).addClass('hovered');
      console.log("HOVERED");
    },
    function() {
      jQuery('img').removeClass('hovered');
      console.log("NOT HOVERED");
    });
})(jQuery);

*/

$(document).ready(function() {
  $('img').hover(
    function() {
      jQuery('img').not(this).addClass('hovered');
      console.log("HOVERED");
    },
    function() {
      jQuery('img').removeClass('hovered');
      console.log("NOT HOVERED");
    }
  );
});

＆＃13;

img {
  width: 100px;
  height: 100px;
}

img.hovered {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<img src='http://vanhoesenarchitecture.com/wp-content/uploads/2017/10/lone-pine-lodge-17.jpg'>

<img src='http://vanhoesenarchitecture.com/wp-content/uploads/2017/10/lone-pine-lodge-17.jpg'>

＆＃13;

＆＃13;

＆＃13;

Answer 2

（函数（$）{

jQuery（'img'）。mouseover（function（）{

jQuery(this).addClass('hovered');

console.log("HOVERED");

}）

jQuery（'img'）。mouseleave（function（）{

jQuery(this).removeClass('hovered');

console.log("HOVERED Leave");

}）

}） （jQuery的）;