Javascript 除了元素I'；我在jQuery中徘徊？

我试图让人们在笔记本电脑图像上突出显示，一旦他们这样做了，我希望除了我悬停在上面的笔记本电脑图像以外的所有东西都能轻松地变成黑色不透明的颜色

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

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

---

我认为实现这一点的一个更简单的方法是在所有东西的顶部创建一个固定的黑色半透明元素，使其默认隐藏，并在鼠标悬停时显示它

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

---

JSFiddle上的演示：

opacity

CSS属性应用于元素的所有子元素，因此如果在

body

上执行此操作，则

img

标记也将具有

opacity:0.5

---

因此，更好的解决方案可能是动态添加/显示一个

div

开关，该开关将覆盖除图像外的所有身体。

有两种方法可以获得您想要的：

1/您需要将这两种成分放在单独的容器中。比如说

<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/只需使用

rgba（0,0,0,7）

颜色作为图层的背景。您可以在具有此背景的div中包含元素，并且不会影响这些元素。

和您的相关HTML？小提琴也总是很棒。您最好不要尝试为每个DOM元素的不透明度设置动画，而是插入一个z索引层，您可以将高亮显示的元素移动到前面，然后更改该层的不透明度以隐藏其他所有内容。