Question

我测试了这段代码片段，但是第一个函数没有执行，而第二个函数没有执行。为什么这样？相同的功能在悬停事件中正常工作..

<!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" />
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("p").mouseover(function(){
                $(".Stop").text($(".Stop").text()+"  Test 0");
            },function(){
                    $(".Stop").text($(".Stop").text()+"  Test 1");
                }

            );
    })
</script>
<style type="text/css">
.Stop{color:red;border:#000 thin solid;width:100px;}
</style>
<title>Untitled Document</title>
</head>

<body>
<form name="frm1" >
    <input type="text" id="myForm"/>
    <input type="text" id="myForm1"/>
    <input type="text" id="myForm2"/>
</form>
<p class="sakl" >Click</p>
<p class="Stop"></p>
</body>
</html>

Answer 1

jQuery documentation for mouseover中没有任何地方指定可以使用两个函数。你必须使用hover来完成同样的工作。

$(document).ready(function() {
    $("p").hover(function() {
        $(".Stop").text($(".Stop").text() + "  Test 0");
    }, function() {
        $(".Stop").text($(".Stop").text() + "  Test 1");
    });
});

Answer 2

当您需要在鼠标离开段落区域时需要执行某些操作时，您需要的行为是什么：

$(document).ready(function () {
    $("p").mouseover(function () {
        $(".Stop").text($(".Stop").text() + "  Test 0");
    } );

    $("p").mouseleave(function () {
        $(".Stop").text($(".Stop").text() + "  Test 1");
    }
 );
})

为什么不以这种方式触发第一个功能？

2 个答案: