jQuery / CSS问题2：悬停元素触发了不必要的悬停操作

Question

Long time ago, I made a question with the concept: Jquery/CSS challenge, where I use Jquery to fill in for CSS place and was given the hover function (because I haven't learned that before, and is now very useful!) So I copied the code, edited it to my liking to make my homemade 'navigation' buttons made by the span attribute (i know i can use button, but was curious on how it plays here). 很久以前，我对这个概念提出了一个问题：Jquery / CSS挑战，在这里我使用Jquery填写CSS位置并获得了悬停功能（因为我以前没有学过，现在非常有用！）因此，我复制了代码，根据自己的喜好对其进行了编辑，以制作由span属性制作的自制“导航”按钮（我知道我可以使用按钮，但对它在此处的功能感到好奇）。

So when I begin to test it, I noticed an odd behavior. 因此，当我开始对其进行测试时，我注意到一种奇怪的行为。 After I started my hovering activity on multiple 'same' attributes. 在我对多个“相同”属性进行悬停活动之后。 My mouse acted weirder when my on hover acts like 'off hover' and when I go away it acted like I was 'on hover'. 当我的悬停鼠标悬停就像“悬停”时，我的鼠标起了怪异作用。 I even edited to mouse enter and mouse leave from the jQuery library and I still run into the same issue, HELP! 我什至对jQuery库中的鼠标进入和鼠标离开进行了编辑，但仍然遇到相同的问题，帮助！

Here is my sample of code used for the jQuery-Css Project: 这是我用于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"
                                }
                            )
                        ;
                    }
                )
            ;       
        }
    )
;

Then the appropriate HTML coding used for this scenario: 然后，用于此方案的适当的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>

I do spread my coding out just for easy editing purposes, but I need help with this! 我确实将代码散布开来只是为了方便编辑，但我需要帮助！ Thank you all for making this a good community! 谢谢大家使这个社区变得美好！

Answer 1

It is not acting weird. 这并不奇怪。 That is happening because you have made two functions there in the hover event. 之所以发生这种情况，是因为您在悬停事件中执行了两个功能。 The first one is fired when you hover and the second one when you left the button. 当您将鼠标悬停时会触发第一个，而在您按下按钮时会触发第二个。 If you want only the hover event you can make only one function there 如果只需要悬停事件，则只能在其中执行一项功能

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

And you can use mouseleave function in jquery to understand when the user left the button. 您可以在jquery中使用mouseleave函数来了解用户何时按下按钮。

Read this article for better understand http://www.w3schools.com/jquery/event_hover.asp 阅读本文以更好地了解http://www.w3schools.com/jquery/event_hover.asp

jQuery / CSS问题2：悬停元素触发了不必要的悬停操作

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-08-20 21:29:33

jQuery / CSS问题2：悬停元素触发了不必要的悬停操作

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-20 21:29:33

解决方案1
1 已采纳 2016-08-20 21:29:33