Question

我试图让人们突出显示笔记本电脑的图像，一旦他们这样做，我想要除了笔记本电脑图像之外的所有东西我都会轻松地变成黑色不透明色。

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

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

我认为实现这一目标的一种更简单的方法是创建一个固定的黑色半透明元素，它是窗口的大小，在所有内容之上，默认情况下隐藏它并在鼠标悬停时显示它{{1 }}

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

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

Answer 2

opacity CSS属性适用于该元素的所有子元素，因此如果您在body上执行此操作，则img标记也会opacity:0.5。

所以更好的解决方案是动态添加/显示div女巫将覆盖除你的形象以外的所有身体。

Answer 3

有两种方法可以获得你想要的东西：

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中使用这个背景的元素，它不会影响这些元素。

除了我在jQuery中盘旋的元素外，我怎样才能改变一切的不透明度？

3 个答案: