Question

我有一个完美运作的JSFiddle

我想让div在悬停时改变颜色，然后在鼠标移出时再回到原来的颜色。我的小提琴完美无缺，但是当我在本地运行它时，它只会变成灰色而不会恢复原来的颜色。

Jquery的

<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.将小提琴代码复制到本地保存。如果小提琴完美地运作，它也应该在本地 - 所以请确保你有相同的代码 2.尝试使用mouseout事件。没有什么区别，但您的浏览器可能会有不同的解释 3.您的代码中也存在一些语法错误。例如，错误的地方有几个分号会影响执行 - 检查更新的小提琴here。

N.B：如果你正在使用jQuery，你也可以将它用于window.onresize - 只是一个提示。

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

希望这有帮助。

编辑：原则上，我也同意Barmar的评论 - 如果可能的话，使用CSS。大约10％的互联网用户使用旧版浏览器（没有JS支持）或已禁用JS - 因此这种更改不适用于10％的用户。再次，更新小提琴（这次使用CSS）here。

Answer 2

只需使用mouseout函数代替mouseleave，例如：

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

它就像一个魅力。

也许您应该将CSS用于以下代码：

#employerbutton:hover{
   background-color : #6EBE44;
}

为什么mouseleave事件不起作用？

2 个答案: