jQuery mouseover显示隐藏的div并显示div,如果只有鼠标仍然在div上

Question

jQuery mouseover显示隐藏的div并显示div,如果只有鼠标仍然在div上

我的鼠标悬停和鼠标输出功能有问题.当我鼠标悬停链接时,它显示一个隐藏的<div>,当我鼠标输出div时,它隐藏了div.问题是,如果我将鼠标悬停在链接上,那么我将鼠标移动到不在div上方的其他地方,div将不会消失.

如果我使用链接的mouseout事件来设置div的可见性,那么我将无法将鼠标悬停在div上.

这是我的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>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });

                $("#hello").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });
                $("#hello").mouseout(function() {
                    $("#hello").css('visibility', 'hidden');
                });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <a id="show_div" href="#">Link text</a>
        <div id="hello" style="visibility:hidden;">
            <ul>
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>    
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

abe*_*ito 2

我使用 setTimeout 函数来更改 css 属性。将setTimeout的间隔设置为~333-500毫秒，并设置Div的mouseover清除超时。然后，在 div 本身的鼠标移开时，再次设置计时器:)

示例/答案：

// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$("#show_div").mouseover(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

$("#hello").mouseover(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

// set a timer to hide the DIV
$("#show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$("#hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

// hides the DIV
function hideHello() {
    $("#hello").css('visibility', 'hidden');
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，5 月前
查看次数：	11520 次
最近记录：	10 年，12 月前