有時候我們需要這個效果:當鼠標放上去的時候顯示一個div,當鼠標移走的時候就將div隱藏了。代碼如下,記得引入Jquyer庫。(當鼠標移動到id=menu的div上的時候,顯示id=list的div,然后將鼠標再次移動到id=list的div上的時候,list的div也不會隱藏)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
$("#list").hide();
$("#menu").hover(function () {
$("#list").show();
}, function () {
$("#list").hide();
})
// 鼠標移動到list的div上的時候list div不會被隱藏
$("#list").hover(function () {
$("#list").show();
}, function () {
$("#list").hide();
})
});
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="menu" style="width: 300px; height: 100px; border: 1px solid red;">
</div>
<div id="list" style="width: 300px; height: 300px; ">
</div>
</div>
</form>
</body>
</html>
