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

Question

很久以前，我对这个概念提出了一个问题：Jquery / CSS挑战，在这里我使用Jquery填写CSS位置并获得了悬停功能（因为我以前没有学过，现在非常有用！）因此，我复制了代码，根据自己的喜好对其进行了编辑，以制作由span属性制作的自制“导航”按钮（我知道我可以使用按钮，但对它在此处的功能感到好奇）。

因此，当我开始对其进行测试时，我注意到一种奇怪的行为。 在我对多个“相同”属性进行悬停活动之后。 当我的悬停鼠标悬停就像“悬停”时，我的鼠标起了怪异作用。 我什至对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 个解决方案

解决方案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