Javascript 改变一切的不透明度,但悬停图像

标签 javascript jquery css hover

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

我搜索并找到了几个选项,但都没有用。另外,在我的例子中,他们不是 sibling ,所以我正在努力让它发挥作用。这是我正在使用的代码:

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

如有任何帮助,我们将不胜感激!

最佳答案

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

关于Javascript 改变一切的不透明度,但悬停图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50065662/

相关文章:

javascript - 组件变量是否自动绑定(bind)到服务变量

php - 将事件类添加到 Wordpress 中当前选定的 anchor

javascript - 当在不同页面上单击链接时,试图让这个 wordpress 主题滚动到一个 id

css - 如何防止多轮播中的图片相互重叠?

javascript - 从另一个函数调用 jQuery 的 DOM 就绪函数

JQuery 的 .prop() 不会设置属性

javascript - 在 Github 存储库中包含其他 CSS/JS 库的最佳方式?

javascript过滤器/搜索Html列表

javascript - 我想关闭一个已经打开的 div 并在我单击链接时显示另一个

javascript - 是否可以阻止远程脚本在 iframe 内加载?