jquery - 为什么 mouseleave 事件不起作用？

Question

我有一个完美运行的 JSFiddle

Fiddle

我希望 div 在悬停时改变颜色，然后在鼠标移出时恢复到原来的颜色。我的 fiddle 工作得很好，但是当我在本地运行它时，它只会变成灰色而不会变回原来的颜色。

查询

<script>

    $(document).ready(function () {
        //Logo Replacement
        window.onresize = function (event) {
            var screenWidth = $(window).width();
            if ((screenWidth) < 969 && (screenWidth) > 769) {
                $("#logoHolder img").attr("src", "images/payday_ira_logo_stacked_web.png")
            }
            else {
                $("#logoHolder img").attr("src", "images/payday_logo_long_web.png")
            }
        }
        //Button Color Change
        $("#employerButton").mouseenter(function () {
            $("#employerButton").css({ "background-color": "grey" });
        });

        $("#employerButton").mouseleave(function () {
            $("#employerButton").css({ "background-color": "#6EBE44;" })
        });
    });


</script>

CSS

#employerButton{
    background-color:#6EBE44;
    height:35px;

    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
}

HTML

<div class="d3-d6 m1" id="employerButton">
    Employer
</div>

我做错了什么？

Answer 1

一些你可以尝试的事情:
1.将fiddle代码复制到本地保存。如果 fiddle 完美运行，它也应该在本地运行 - 所以请确保您有相同的代码。
2. 尝试改用 mouseout 事件。差别不大，但您的浏览器可能会有所不同。
3. 您的代码中也存在一些语法错误。例如，在错误的位置有几个分号可能会影响执行 - 检查更新的 fiddle here .

注意:如果您使用的是 jQuery，您也可以将它用于 window.onresize - 只是一个提示。

$(window).resize(function() { ... });

希望这对您有所帮助。

编辑:原则上，我也同意 Barmar 的评论 - 如果可能的话，请改用 CSS。大约 10% 的互联网用户使用旧版浏览器(不支持 JS)或禁用了 JS - 因此此更改不适用于您的 10% 的用户。再次更新 fiddle (这次使用 CSS)here .