jquery 鼠标悬停显示信息提示框

jquery 鼠标悬停显示信息提示框,但是提示框会影响其他块的布局位置(其他块会向下滑动),要怎么修改才可以让提示框覆盖在最上层显示而不影响其他块的布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type">
<style type="text/css">
.content{
    display:none;
    width:250px;
    height:70px;
    border-radius:10px;
    padding:20px;
    position:relative;
    top:15px;
    left:80px;
    background-color:#2F4056;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
$(".content").show("slow");
$(".contact").mouseout(function(){
$(".content").hide("slow");
});
});
})
</script>
</head>
<body>
    <a href="#" style="color: blue;float=left" class="contact">不再犹豫</a>    
    <div class="content" style="color: white;">
        无聊望见了忧郁,达到理想不太易<br /><br />
        谁人定我去或留,定我心中的宇宙
    </div>
    <div >
        1无聊望见了忧郁,达到理想不太易<br /><br />
        谁人定我去或留,定我心中的宇宙
    </div>
</body>
</html>

4个回答

.content里改成:position:absolute;

把提示框的样式设置成position: absolute;,如果需要跟随鼠标,他的left,top就跟着鼠标的位置去让js设置。但是如果你只是想简单的提示一条信息,标签里面加title属性就可以实现了

<!DOCTYPE html>



鼠标悬停显示提示信息窗口
html,body{ position: relative; } .content{ display:none; width:250px; height:70px; border-radius:10px; padding:20px; position: absolute; top:15px; left:80px; background-color:#2F4056; } $(document).ready(function(){ $(".contact").mouseover(function(){ $(".content").show("slow"); $(".contact").mouseout(function(){ $(".content").hide("slow"); }); }); })



不再犹豫


无聊望见了忧郁,达到理想不太易


谁人定我去或留,定我心中的宇宙


1无聊望见了忧郁,达到理想不太易


谁人定我去或留,定我心中的宇宙


使用绝对定位解决文档流问题——position: absolute,然后使用z-index解决始终处于上层问题——z-index: 999

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐