jquery写的两级滑出菜单

最新推荐文章于 2024-10-02 10:11:21 发布

何麒

最新推荐文章于 2024-10-02 10:11:21 发布

阅读量821

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/liulangdeshusheng/article/details/16940819

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种利用HTML、CSS及jQuery实现鼠标悬停时显示浮动提示的方法。通过为列表项添加鼠标悬停事件来定位并显示隐藏的提示框，并确保提示框随鼠标移动而移动。该方案适用于需要快速实现鼠标悬停提示效果的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li{float: left;list-style: none;cursor: pointer;width: 40px;text-align: center;}

div.ss{z-index: 20;border: 1px solid silver;height: 60px;position: absolute;background:silver;}
div.ss div{text-align: center;}
div.ss div:HOVER{cursor: pointer;background-color: yellow}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var div = document.createElement("div");
var div2 = document.createElement("div");
$(function(){
div.className = "ss";
div2.className = "ss";
document.body.appendChild(div);
document.body.appendChild(div2);
$(div).append("<div>aa</div><div>bb</div>");
$(div).hide();
$(div2).hide();
});

$(function(){
$('li').mouseover(function(){
var obj=$(this).offset();
var xobj=obj.left+"px";
var yobj=obj.top+this.offsetHeight-1+"px";
$(div).css("width",this.offsetWidth);
$(div).css('top',yobj);
$(div).css('left',xobj);
$(div).show();
}).mouseout(function(){
$(div).hide();
})

$(div).mouseover(function(){
$(this).show();
}).mouseout(function(){
$(this).hide();
});

$('div.ss div').mouseover(function(){
$(div2).show();
$(div).show();
var obj=$(this).offset();
var xobj=obj.left+this.offsetWidth-1+"px";
var yobj=obj.top+"px";
$(div2).css("width",this.offsetWidth);
$(div2).css('top',yobj);
$(div2).css('left',xobj);
$(div2).show();
$(div).show();
}).mouseout(function(){
$(div).hide();
$(div2).hide();
})

$(div2).mouseover(function(){
$(div).show();
$(this).show();
}).mouseout(function(){
$(div).hide();
$(this).hide();
});

});

</script>
</head>
<body>


<ul style="display: inline;">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>

</body>

</html>

offset()方法获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。