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

【问题标题】：Javascript to change opacity in everything BUT hovered imageJavascript改变所有东西的不透明度，但悬停的图像
【发布时间】：2018-04-27 15:27:45
【问题描述】：

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

任何帮助将不胜感激！

【问题讨论】：

为什么你把removeClass直接放在callback里？
我认为它可能会有所帮助。即使将其删除，它仍然无法正常工作。
您的逻辑看起来不错，但我们需要查看随附的 HTML 和 CSS 以帮助您。请编辑问题以包含它们
我还应该补充一点，当悬停/未悬停时，它甚至不会出现在控制台中。
这是一个 WordPress 网站，我应该发布多少代码？

标签： javascript jquery css hover

【解决方案1】：

/*(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'>

【讨论】：

你能告诉我这里出了什么问题吗？你希望它如何运作？
是的，这在页面上不是这样工作的：vanhoesenarchitecture.com/completed-works
请为您的页面打开控制台并将上面的javascript粘贴到那里。你能确认它是否有效吗？
很奇怪。当我插入js时什么都没有。但是当我也将 jquery
啊！那只是让我想通了。谢谢你们的帮助。

【解决方案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);

【讨论】：