javascript - 我怎样才能改变除了我在 jQuery 中悬停的元素之外的所有东西的不透明度？

Question

我试图让人们在笔记本电脑图像上突出显示，一旦他们这样做，我想要除了我正在悬停的笔记本电脑图像之外的所有内容以缓和为黑色不透明颜色。

这是我到目前为止的代码，它使 body 中的所有东西都改变不透明度:

$(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

我认为实现此目的的更简单方法是创建一个固定的黑色半透明元素，它是窗口的大小，在所有元素之上，默认隐藏它并在鼠标悬停时显示它 laptop_img.

您还必须处理悬停元素的 z-index，以便它显示在黑色元素的顶部。

JSFiddle 上的演示:http://jsfiddle.net/edc642pz/2/