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