Select All Body Except One Element

I'm trying to select all the body's elements in jQuery except 'this', or the one being hovered on. I'm trying to get the body to go to a certain opacity, but 'this' to maintain its

Solution 1:

Try the following, use CSS to handle hover set new height, when not hovered the height will back to whatever you have before.

Also with hover and callback(not hovered), you can set all other to opacity: "0.4" on hover, and reset all when mouse move out (opacity: "1")

$(".content").hover(function() {
  $(this).css("cursor", "pointer");
  $("body").find("*").not(this).animate({
    opacity: "0.4"
  }, 1000);
}, function() {
  $("body").find("*").stop().animate({
    opacity: "1"
  }, 0);
});

div {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: green;
}

.heigher {
  height: 100px;
}

.content:hover {
  height: 200px;
  -webkit-transition: height 1s linear;   
  -moz-transition: height 1s linear;   
  -ms-transition: height 1s linear;   
  -o-transition: height 1s linear;   
  transition: height 1s linear; 
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="content">content 1</div><divclass="content">content 2</div><divclass="content">content 3</div><divclass="content heigher">content 4</div><divclass="content">content 5</div><divclass="content heigher">content 6</div>

UPDATED Version:

$(".content img").mouseenter(function() {
  $(this).parent().animate({
    opacity: "1",
  });

  $(".content").find('img').not($(this)).parent().animate({
    opacity: "0.4",
  });
});

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="content"><divclass="row"><divclass="col-md-2"><h4>Handbags</h4><imgsrc="FullSizeRender (1).jpg" /></div><divclass="col-md-2"><h4>Beach bags</h4><imgsrc="FullSizeRender (2).jpg" /></div><divclass="col-md-2"><h4>Purses</h4><imgsrc="IMG_5213.JPG" /></div><divclass="col-md-2"><h4>Bottle carriers</h4><imgsrc="FullSizeRender (5).jpg" /></div><divclass="col-md-2"><h4>Baskets</h4><imgsrc="img1.jpg" /></div></div><divclass="row"><divclass="col-md-2"><h4>Vases</h4><imgsrc="img2.jpg" /></div><divclass="col-md-2"><h4>Placemats</h4><imgsrc="img6.jpg" /></div><divclass="col-md-2"><h4>Coasters</h4><imgsrc="IMG_4665.JPG" /></div><divclass="col-md-2"><divclass="tiss"><h4>Tissue box covers</h4><imgsrc="img3.jpg" /></div></div><divclass="col-md-2"><divclass="ornament"><h4>Holiday ornaments</h4><imgsrc="img4.jpg" /></div></div></div></div>

Solution 2:

Bulk-selecting like that probably isn't going to give the result you're after, since it would still target the children and parents of the element you want to keep opaque - lowering its opacity in the process.

There are a few different ways you could handle this. You might add some kind of "mask" element (typically an empty div is used for things like this) with a translucent background-color (ala rgba(255,255,255,0.5)). Getting the hovered-on item to override that mask could be done by changing the z-index, so everything that's not hovered is at a lower index than the mask div and the thing getting hovered is at a higher one.

That said, you might want to think twice about this. What's the benefit of making the non-hovered parts of the site harder to see? Could you find another way to highlight the hovered item for emphasis, without fading out everything else? Keep usability in mind when you're dealing with questions like this one.