JS实现鼠标经过Label显示表格,移开隐藏表格

caoyuanlaoshi 2016-12-08 09:27:05
请大神帮我看看吧,指教一下怎么解决啊,下面分别是aspx页面和js代码,谢谢~~
<div class="bear" >
<asp:Label ID="bearLbl" runat="server" Text="4.1 轴承部分"></asp:Label>
<table >
<tr>
<td class="td1">
 
</td>
<td class="td2">
 
</td>
<td class="td3">
 
</td>
<td class="td4">
 
</td>
<td class="td5">
 
</td>
</tr>
</table>
</div>

JS:
window.onload = initAll;

function initAll() {
var ui = document.getElementById("bearLbl");
ui.onmouseover = toggle;
}
function toggle() {

document.getElementById("bear").style.display = "block";

this.parentNode.onmouseout = function () {
document.getElementById("bear").style.display = "none";
}
this.parentNode.onmouseover = function () {
document.getElementById("bear").style.display = "block";
}
}
...全文
322 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
caoyuanlaoshi 2016-12-08
  • 打赏
  • 举报
回复
我调试一下,采用版主和4#的方法都可以解决我的问题
bluedrink 2016-12-08
  • 打赏
  • 举报
回复
其实直接把事件添加到bear上就行了,mouseover是table显示,out是消失,不过表格和label要相连
当作看不见 2016-12-08
  • 打赏
  • 举报
回复
那我就厚颜过来接分
caoyuanlaoshi 2016-12-08
  • 打赏
  • 举报
回复
引用 3 楼 qq_29594393 的回复:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body class="bigbox">
<div class="bear" >
       <label id="bearLbl">label</label>
            <table border="1">
                <tr>
                    <td class="td1">
                         1
                    </td>
                    <td class="td2">
                         1
                    </td>
                    <td class="td3">
                         1
                    </td>
                    <td class="td4">
                         1
                    </td>
                    <td class="td5">
                         1
                    </td>
                </tr>
            </table>
        </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var flag;
$('#bearLbl').mouseenter(function(){
	$("table").show()
})

$('#bearLbl').mouseout(function(){
	flag=setTimeout(function(){
		$('table').hide()
	},300)
})
$('table').mouseenter(function(){
	clearTimeout(flag)
})
$('table').mouseleave(function(){
	$(this).hide()
})
</script>
</html>
应该是要这种效果
谢谢,就是这个效果
marlborone 2016-12-08
  • 打赏
  • 举报
回复
document.getElementById("bear")//就没有一个id叫做bear的标签嘛, 如果是<div class="bear" >这个的话,也写错地方了,写在table上面<table id="bear">应该就可以了
当作看不见 2016-12-08
  • 打赏
  • 举报
回复

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body class="bigbox">
<div class="bear" >
       <label id="bearLbl">label</label>
            <table border="1">
                <tr>
                    <td class="td1">
                         1
                    </td>
                    <td class="td2">
                         1
                    </td>
                    <td class="td3">
                         1
                    </td>
                    <td class="td4">
                         1
                    </td>
                    <td class="td5">
                         1
                    </td>
                </tr>
            </table>
        </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var flag;
$('#bearLbl').mouseenter(function(){
	$("table").show()
})

$('#bearLbl').mouseout(function(){
	flag=setTimeout(function(){
		$('table').hide()
	},300)
})
$('table').mouseenter(function(){
	clearTimeout(flag)
})
$('table').mouseleave(function(){
	$(this).hide()
})
</script>
</html>
应该是要这种效果
  • 打赏
  • 举报
回复
直接使用JQ简单 调用一个JQ库 $('#bearLbl').hover(function(){ $(this).show(); })
caoyuanlaoshi 2016-12-08
  • 打赏
  • 举报
回复
自己顶

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧