Question

很久以前，我对这个概念提出了一个问题：Jquery / CSS challenge，我使用Jquery来填充CSS位置并给出了悬停功能（因为我以前没有学到这一点，并且是现在非常有用！）所以我复制了代码，根据自己的喜好对其进行了编辑，以制作我自己的导航版本。由span属性制作的按钮（我知道我可以使用按钮，但很好奇它在这里播放的方式）。

所以当我开始测试它时，我注意到一种奇怪的行为。在我开始在多个＆＃39;相同的＆＃39;之后开始我的悬停活动属性。当我的悬停行为像“徘徊”时，我的老鼠表现得更怪异。当我离开时，它表现得就像我在徘徊时一样。我甚至编辑了鼠标输入和鼠标离开jQuery库，我仍然遇到同样的问题，帮助！

以下是我用于jQuery-Css项目的代码示例：

$(document)
    .ready(
        function() {
            var $span = $("span");
            $span
                .css(
                    {
                        "background-color" : "#eef"
                    }
                )
                .hover(
                    function (){
                        $(this)
                            .css(
                                {
                                    "background-color" : "#ddf"
                                }
                            )
                        ;
                    },
                    function () {
                        $(this)
                            .css(
                                {
                                    "background-color" : "#eef"
                                }
                            )
                        ;
                    }
                )
            ;       
        }
    )
;

然后使用适用于此场景的HTML编码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery Test Page.</title>
        <!--[if lte IE 7]>
            <style>
                .content { 
                    margin-right: -1px;
                } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
                ul.nav a { 
                    zoom: 1;
                }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
            </style>
        <![endif]-->
    </head>
    <body>
        <div class="menu">
            <span id="a">I am button A</span>
            <span id="b">I am button B</span>
            <span id="c">I am button C</span>
        </div>
    </body>
</html>

我的编码只是为了简化编辑，但我需要帮助！谢谢大家让这个社区变得更好！

Answer 1

这并不是很奇怪。这种情况正在发生，因为您在悬停事件中已经创建了两个函数。第一个是悬停时触发的，第二个是当你离开按钮时触发的。如果您只想要悬停事件，则只能在那里创建一个函数

$span.css({"background-color" : "#eef"}).hover(function (){
   $(this).css({"background-color" : "blue"});
});

您可以在jquery中使用mouseleave函数来了解用户何时离开按钮。

阅读本文以便更好地理解 http://www.w3schools.com/jquery/event_hover.asp

Jquery / Css问题＃2：悬停元素触发不必要的悬停动作

1 个答案: