CODEWITHSUNDEEP
javascriptjquerycsshover
Alison
Alison

Reputation: 31

Javascript to change opacity in everything BUT hovered image

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

I've searched and found a few options but none have worked. Also, in my instance, they are not siblings, so I am struggling to get this to work. Here's the code I'm using:

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

Any help would be greatly appreciated!

Upvotes: 1

Views: 58

Answers (2)

Kumar
Kumar

Reputation: 3126

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

Upvotes: 1

Kamran Ahmed Khan
Kamran Ahmed Khan

Reputation: 9

(function($){

jQuery('img').mouseover(function() {

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

console.log("HOVERED");

})

jQuery('img').mouseleave(function() {

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

console.log("HOVERED Leave");

})

}) (jQuery);

Upvotes: 0

Related Questions