HTML怎么用div盒子做弹出式菜单,就是当鼠标移动到目标的超链接时,就会自动弹出一个菜单? 5

<styletype="text/css">.tishi{position:relative;/*这个是关键*/z-index:2;}.tishi:hover{z-ind... <style type="text/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;}</style><a class="tishi" href="#">On Here<span>Hello Word</span></a>这个菜单只有在鼠标停留在超链接时才会出现,一旦移走鼠标就会自动消失,据说是用层的隐藏与显示来实现??求具体代码,最好简单明了,谢谢! 关键是下面的Hello World怎么设置为超链接 展开
 我来答
czh082504
推荐于2017-12-16 · TA获得超过144个赞
知道小有建树答主
回答量:157
采纳率:75%
帮助的人:36.7万
展开全部

实现这个功能很简单,就是利用了hover加上display属性结合起来使用

还有一种原理,利用body的点击事件来操作元素的,也是可以的,但是要利用到js比较麻烦,下面的这个demo是只需要用到css就可以实现的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字符串连接</title>
<style type="text/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;
}
</style>
<body>
    <a class="tishi" href="#">On Here<span>Hello Word</span></a>
</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式