HTML怎么用div盒子做弹出式菜单，就是当鼠标移动到目标的超链接时，就会自动弹出一个菜单？
这个菜单只有在鼠标停留在超链接时才会出现，一旦移走鼠标就会自动消失，据说是用层的隐藏与显示来实现？？求具体代码，最好简单明了，谢谢！...
这个菜单只有在鼠标停留在超链接时才会出现，一旦移走鼠标就会自动消失，据说是用层的隐藏与显示来实现？？求具体代码，最好简单明了，谢谢！
展开
3个回答
展开全部
不用脚本虽然也能实现，只是结构和样式相对复杂，不如使用脚本，清晰明了。隐藏显示部分可以为任何想要的内容。代码如下：
<!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>example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#divcon').hide();
$('#aa').hover(function(){$('#divcon').show();},function(){$('#divcon').hide();});
});
</script>
<style type="text/css">
<!--
body{ color:#000; font:12px Arial, Helvetica, sans-serif;}
#aa{ color:#000; text-decoration:none;}
#divcon{ background:#eee; padding:10px; width:150px;}
-->
</style>
</head>
<body>
<a id="aa" href="#">我是链接，鼠标过来</a>
<div id="divcon">隐藏的任意内容，鼠标移到链接上出现，移开即隐藏！</div>
</body>
</html>
<!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>example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#divcon').hide();
$('#aa').hover(function(){$('#divcon').show();},function(){$('#divcon').hide();});
});
</script>
<style type="text/css">
<!--
body{ color:#000; font:12px Arial, Helvetica, sans-serif;}
#aa{ color:#000; text-decoration:none;}
#divcon{ background:#eee; padding:10px; width:150px;}
-->
</style>
</head>
<body>
<a id="aa" href="#">我是链接，鼠标过来</a>
<div id="divcon">隐藏的任意内容，鼠标移到链接上出现，移开即隐藏！</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
鼠标经过链接文字弹出提示框，滑过即隐藏，可以实现，稍后上给你上代码。
追问
最好是DIV+CSS格式，不用脚本
追答
好的，给你个简单的，用CSS来控制，样式根据你自己页面风格来调整即可，有疑问请追问。
代码如下：
.tishi{
position:relative; /*这个是关键*/
z-index:2;
}
.tishi:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
}
.tishi span{
display: none;
}
.tishi:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1px solid black;
background-color:#ccFFFF;
padding: 3px;
color:black;
}
On HereHello Word
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
