云木one 2019-10-21 11:05 采纳率: 0%
浏览 2108

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条回答 默认 最新

  • 火蚂蚁cui 2019-10-21 11:29
    关注

    .content里改成:position:absolute;

    评论

报告相同问题?

悬赏问题

  • ¥100 求数学坐标画圆以及直线的算法
  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 自己瞎改改,结果现在又运行不了了
  • ¥15 链式存储应该如何解决