asp.net div显示问题
1楼说的不错。这个东西和lable或者是linkbutton控件没多大关系。只要是div里面有标签,那么就会触发mouseout事件 。因为你把鼠标移动到div里面的标签上时,已经触发了div的mouseout事件。你可以点击一下aaaa然后,别碰到div里面的标签内容试试。它是不会缩回去的。 你把那个mouseout事件改为mouseleave事件就可以了。我已经测试过了。绝对可以。
楼主,小生有个建议,楼主可以上W3C去学习html标签的事件。你会发现有很多很多事件,每个事件都有不同的反应。
楼主做的这个东西在很多网站都有应用。楼主的JQuery非常棒,不过。小生认为javascript更加适合我们使用。虽然用起来不如JQuery那么方便。但是javascript是基础。
我还想说一句。那就是楼主最好在div内使用html标签来计划div中的内容。linkbutton是微软的服务器控件。不是太好。另外把我测试的代码给楼主吧
<!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>demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
body,h1,div,ul,li{ margin:0; }
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;background:url(/testXiangmu/images/http_imgloadCARR1VEX.jpg) no-repeat; }
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{ width:300px;height:150px;}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; top:30px; color:#333;display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".demo li").click(function(){
$(this).addClass("cur");
$(this).children(".d-bk").slideDown();
}).mouseleave(function(e){ //此处做了修改
var d = $(this).children(".d-bk");
var r = e.relatedTarget;
if (r!==d[0]){
$(".demo li").removeClass("cur");
d.slideUp();
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="demo">
<li>
aaaa
<div class="d-bk">111<span>试试</span><a href="Default.aspx">测试鼠标移动</a></div>
</li>
<li>
bbbb
<div class="d-bk">222</div>
</li>
<li>
cccc
<div class="d-bk">333</div>
</li>
</ul>
<%--<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>--%>
</div>
</form>
</body>
</html>