0

我希望一个 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。当我将鼠标移到它上面时没有任何反应。有什么问题吗？

4

2 回答 2

1

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

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

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

于 2013-03-23T21:29:09.047 回答
0

css怎么样？

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

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

于 2013-03-23T21:29:12.790 回答