时间戳

首页 > 解决方案 > Javascript改变所有东西的不透明度，但悬停的图像

javascript - Javascript改变所有东西的不透明度，但悬停的图像

问题描述

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

任何帮助将不胜感激！

标签： javascriptjquerycsshover

解决方案

/*(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");
    }
  );
});
img {
  width: 100px;
  height: 100px;
}

img.hovered {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
<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'>

推荐阅读