大概就是这样的效果:
<html>
<body>
<a href="javascript:voie(0)" id="atest" onmouseover="a_onmouseover()">鼠标悬停 </a>
<div id="divTest" style="display: none; background: red; width: 100px">
测试内容
</div> <script type="text/javascript">
var timer;
function a_onmouseover()
{
var ddv = document.getElementById("divTest");
var atest = document.getElementById("atest");
ddv.style.display="block";
ddv.onmouseover=function(){
clearTimeout(timer);
ddv.onmouseout=function(){
this.style.display="none";
}
}
atest.onmouseout=function(){Mout()}
}
function Mout()
{
timer = setTimeout(function(){document.getElementById("divTest").style.display="none";},100);
} </script> </body> </html> 然后我用了jQuery想制作出层滑动的效果: <script language="javascript" type="text/javascript">
//显示隐藏login鼠标悬停
var timer;
$(document).ready(function() {
var ac = $('#aLogin');
var lc = $('#divLogin');
ac.mouseover(function() {
lc.show('slow');
lc.mouseover(function(){
clearTimeout(timer);
lc.mouseout(function(){
lc.hide('slow');
})
});
ac.mouseout(function(){timer=setTimeout(function(){lc.hide('slow');},500);});
});
});
</script>
<body bgcolor="#FFFFFF" style=" margin-left:0px; margin-top:0px; text-align:center;">
<form id="form1" runat="server">
<table id="__01" cellpadding="0" cellspacing="0" style=" width:950; height:807px; border:0px;">
<tr>
<td>
<table style="width:950px; height:54px;"> <tr> <td style="width:81%;">
<div style="height:34px; width: 434px; display:none;" id="divLogin" >
<uc1:Login ID="Login1" runat="server" />//用户登录控件,详细代码在下面。
</div> </td> <td style="width:4%"> <a style="text-decoration:none; font-family:Helvetica; font-size:14px; color:Black;" id="aLogin" href="#">登 录 </a> </td> </tr> </table>
</td>
</tr>
<table> 用户控件代码: <table style="width:426px; font-family:Helvetica; font-size:13px; height: 28px;" >
<tr style="height:31px;">
<td>
<asp:Label ID="lblUserName" runat="server" Text="User:" Height="17px"> </asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="108px" Height="15px"> </asp:TextBox>
</td>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Password:" Height="17px"> </asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"
Width="110px" Height="15px"> </asp:TextBox>
</td>
<td>
<asp:LinkButton ID="lbnLogin" runat="server" ForeColor="#CC3300"
onclick="lbnLogin_Click">登 录 </asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lbnLoginOut" runat="server" ForeColor="#CC3300"
onclick="lbnLoginOut_Click" Visible="False">退出登录 </asp:LinkButton>
</td>
</tr>
</table>
然后请朋友们帮忙看下,当我onmouseover和onmouseout时都是没问题的,但是我的鼠标覆盖在用户控件上面时(也就是我想要滑出来的层),它依然不能block,继续隐藏。请朋友们帮我看看,谢谢!
<html>
<body>
<a href="javascript:voie(0)" id="atest" onmouseover="a_onmouseover()">鼠标悬停 </a>
<div id="divTest" style="display: none; background: red; width: 100px">
测试内容
</div> <script type="text/javascript">
var timer;
function a_onmouseover()
{
var ddv = document.getElementById("divTest");
var atest = document.getElementById("atest");
ddv.style.display="block";
ddv.onmouseover=function(){
clearTimeout(timer);
ddv.onmouseout=function(){
this.style.display="none";
}
}
atest.onmouseout=function(){Mout()}
}
function Mout()
{
timer = setTimeout(function(){document.getElementById("divTest").style.display="none";},100);
} </script> </body> </html> 然后我用了jQuery想制作出层滑动的效果: <script language="javascript" type="text/javascript">
//显示隐藏login鼠标悬停
var timer;
$(document).ready(function() {
var ac = $('#aLogin');
var lc = $('#divLogin');
ac.mouseover(function() {
lc.show('slow');
lc.mouseover(function(){
clearTimeout(timer);
lc.mouseout(function(){
lc.hide('slow');
})
});
ac.mouseout(function(){timer=setTimeout(function(){lc.hide('slow');},500);});
});
});
</script>
<body bgcolor="#FFFFFF" style=" margin-left:0px; margin-top:0px; text-align:center;">
<form id="form1" runat="server">
<table id="__01" cellpadding="0" cellspacing="0" style=" width:950; height:807px; border:0px;">
<tr>
<td>
<table style="width:950px; height:54px;"> <tr> <td style="width:81%;">
<div style="height:34px; width: 434px; display:none;" id="divLogin" >
<uc1:Login ID="Login1" runat="server" />//用户登录控件,详细代码在下面。
</div> </td> <td style="width:4%"> <a style="text-decoration:none; font-family:Helvetica; font-size:14px; color:Black;" id="aLogin" href="#">登 录 </a> </td> </tr> </table>
</td>
</tr>
<table> 用户控件代码: <table style="width:426px; font-family:Helvetica; font-size:13px; height: 28px;" >
<tr style="height:31px;">
<td>
<asp:Label ID="lblUserName" runat="server" Text="User:" Height="17px"> </asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="108px" Height="15px"> </asp:TextBox>
</td>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Password:" Height="17px"> </asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"
Width="110px" Height="15px"> </asp:TextBox>
</td>
<td>
<asp:LinkButton ID="lbnLogin" runat="server" ForeColor="#CC3300"
onclick="lbnLogin_Click">登 录 </asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lbnLoginOut" runat="server" ForeColor="#CC3300"
onclick="lbnLoginOut_Click" Visible="False">退出登录 </asp:LinkButton>
</td>
</tr>
</table>
然后请朋友们帮忙看下,当我onmouseover和onmouseout时都是没问题的,但是我的鼠标覆盖在用户控件上面时(也就是我想要滑出来的层),它依然不能block,继续隐藏。请朋友们帮我看看,谢谢!
var timer;
$(document).ready(function() {
var ac = $('#aLogin');
var lc = $('#divLogin');
ac.mouseover(function() {
lc.show('slow');
lc.mouseover(function(){
clearTimeout(timer);
lc.mouseout(function(){
lc.hide('slow');
});
});
ac.mouseout(function() {
timer=setTimeout(mout(),100);
});
});
function mout(){
lc.hide('slow');
}
});
clearTimeout(timer);