鼠标移到某一元素则在元素旁边出现弹出框(JQuery)

最新推荐文章于 2022-02-21 19:49:58 发布

weixin_34408624

最新推荐文章于 2022-02-21 19:49:58 发布

阅读量523

点赞数

文章标签： javascript 前端 xhtml ViewUI

本文提供了一个使用HTML和JavaScript实现鼠标悬停显示订单详情弹窗的示例代码。通过计算鼠标位置，使弹窗跟随鼠标移动并展示相应订单内容。

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

类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>框框随着鼠标点击的元素的位置改变而改变</title>
    <style type="text/css">
    a{
    border: 1px solid #0f0;
    margin: 20px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    float: left;
    display: block;
    text-align: center;
    }
    .pop{
        width: 350px;
        height: 200px;
        border: 1px solid #00f;
        background-color: #ffffee;
        display: none;
        position:absolute;  /* 注：弹出框必须为绝对定位 */
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function hidedetails(){
            $("#details").hide();
        }
        function showdetails(thisObj,orderid){
            var d = $(thisObj);
            var pos = d.offset();
            var t = pos.top + d.height() + 5; // 弹出框的上边位置
            var l = pos.left + d.width() + 5;  // 弹出框的左边位置
            $("#details").css({ "top": t, "left": l }).show();
            $("#details").html("订单 "+orderid+" 的内容！");
        }
    </script>
</head>
<body>
<a href="javascript:void(0)" onmouseover="showdetails(this,1)" onmouseout="hidedetails()">订单1</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,2)" onmouseout="hidedetails()">订单2</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,3)" onmouseout="hidedetails()">订单3</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,4)" onmouseout="hidedetails()">订单4</a>
<a href="javascript:void(0)" onmouseover="showdetails(this,5)" onmouseout="hidedetails()">订单5</a>
<div id="details" class="pop">
</div>
</body>
</html>