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

<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怎么设置为超链接

实现这个功能很简单,就是利用了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>

温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答