Question

我想让一个div在鼠标进入时褪色为不透明度1，在它离开时为0.5。这是我的代码：

        <script>
    $(document).ready(function(){
        $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
        });
        $("#header").mouseleave(function(){
            $("#header").fadeTo('fast', 0.5);
    });

    }


    </script>

HTML：

<body>

        <div id="header">
            <h1>Hello!</h1>
            <p>blah blah...</p>
        </div>

</body>

我身体里有一个div，包含一个h1和一个p。当我将鼠标移到它上面时没有任何反应。有什么不对吗？

Answer 1

您的错误缩进隐藏了语法错误：

$(document).ready(function(){
    $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
    });
    $("#header").mouseleave(function(){
        $("#header").fadeTo('fast', 0.5);
    });
}); // <= missing parenthesis

除此之外，it works。请注意，对于所有颜色组合，0.5并不是真正透明。

Answer 2

css怎么样？

#header {
  opacity: .5;
  transition: opacity .3s ease-in-out;
}
#header:hover {
  opacity: 1;
}

只需确保添加所有css供应商前缀即可。这比使用jQuery IMO更好。如果浏览器不支持transition或opacity这没什么大不了的，那就是“优雅降级”的全部内容。

jquery mouseenter和fadeTo

2 个答案: