除了在jQuery中悬停的元素之外，如何更改所有内容的不透明度？

Question

I am trying to have people highlight over a laptop image and once they do so, I want everything but the laptop image I'm hovering over to ease into a black opacity color.

This is the code I have so far which makes everything in the body to change opacity:

$(document).ready(function () {
    $(".laptop_img").mouseenter(function() {
        console.log("Mouse over laptop");
        $("body").css("opacity", "0.5");
    });

    $(".laptop_img").mouseleave(function() {
        console.log("Mouse leaves laptop");
        $("body").css("opacity", "1");
    });
});

Answer 1

I think an easier way to achieve this would be to create a fixed black semi-transparent element that is the size of the window, on top of everything, make it hidden by default and show it whenever the mouse hovers laptop_img .

You would also have to handle the hovered element's z-index so that it would appear on top of your black element.

Demo on JSFiddle: http://jsfiddle.net/edc642pz/2/

Answer 2

opacity CSS property applies to all the children of the element so if you do it on body then you img tag will have opacity:0.5 too.

So better solution could be add/show dynamically a div witch will be covering all body except the your image.

Answer 3

There are two ways to get what You want:

1/ You need to have these two compontents in separate container. For example

<div id="div-with-opacity" style="opacity:.7">
      everything what goes here will has opacity also
   </div>
   <img src="path-to-image" alt="" id="this-image-has-no-opacity"/>

2/ Just use rgba(0,0,0,.7) color as a background of layer. You can have elements inside div with this background and it's not affect these elements.