Jquery 我想从我的td中去掉div，如图所示

我有以下HTML代码：

<table>
    <tr>
        <td>
            <p id="price">10000</p>
            <div class="no" hidden="hidden">Description</div>
        </td>
    </tr>
</table>

10000
描述

我的jquery代码是：

<script type="text/javascript">
    $(document).ready(function(){
        $("#price").live("mouseenter", function () {
            $(this).next("div.no").show();
        });
        $("#price").live("mouseleave", function () {
            $(this).next("div.no").hide();
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#price”）.live（“mouseenter”，函数（）{
$（this.next（“div.no”）.show（）；
});
$（“#price”）.live（“mouseleave”，函数（）{
$（this.next（“div.no”）.hide（）；
});
});

现在我希望标签具有特定的高度。 让我用图片来描述你：

进入鼠标前，表格如下所示：

输入鼠标后，上面的代码将执行以下操作：

但我想做的事情如下：

---

如何做到这一点？

使用css给它一个绝对位置，如果由于某种原因div位于td后面，则添加一个z索引。

隐藏原始div，克隆它，并将其绝对定位在文档中相对于您悬停的td的位置

比如：

 $(document).ready(function(){
        var cloned_div;
        $("#price").live("mouseenter", function () {
            cloned_div = $(this).next("div.no").clone();
            // determine position of the hovered TD
            // position cloned DIV based on that
            // show cloned div
        });
        $("#price").live("mouseleave", function () {
            // destroy / remove cloned div
        });
    });

---

克隆上的jQuery文档：

这应该可以通过CSS解决。您可以将div.no设置为负的顶部边距，使其与p#price重叠

也许这可以帮助您：

我使用了hover而不是live，因为您正在重新创建“onElementEventMouse”，请在此处查看：

HTML:

<table>
    <tr>
        <td>
            <p id="price">10000</p>
            <div class="no" hidden="hidden">Description</div>
        </td>
         <td>
            <p id="price">10000</p>
        </td>
         <td>
            <p id="price">10000</p>
        </td>
    </tr>
</table>

#price {
    background-color: yellow;
    height:40px;
    width: 200px;
}
td {
    text-align: center;
}
.no {    
    background-color: red;
    padding: 15px;
    margin-top: -30px;
    width: 150px;
    position: absolute;
}

$(document).ready(function(){
  $("p#price").hover(
      function () {
        $(this).next("div.no").show();
      },
      function () {
        $(this).next("div.no").hide();
      });
  });

JS:

<table>
    <tr>
        <td>
            <p id="price">10000</p>
            <div class="no" hidden="hidden">Description</div>
        </td>
         <td>
            <p id="price">10000</p>
        </td>
         <td>
            <p id="price">10000</p>
        </td>
    </tr>
</table>

#price {
    background-color: yellow;
    height:40px;
    width: 200px;
}
td {
    text-align: center;
}
.no {    
    background-color: red;
    padding: 15px;
    margin-top: -30px;
    width: 150px;
    position: absolute;
}

$(document).ready(function(){
  $("p#price").hover(
      function () {
        $(this).next("div.no").show();
      },
      function () {
        $(this).next("div.no").hide();
      });
  });

---

希望有帮助

让我们考虑css（只是暂时的目的）

javascript代码如下所示：

$(document).on("mouseenter","#price", function (e) {
    $(this).next("div.no").show().css({
        position: "absolute",
        marginLeft:e.clientX + "px",
        marginTop: e.clientY + "px"
    });
});
$(document).on("mouseleave", "#price",function () {
    $(this).next("div.no").hide();
});

试试这段代码吧，我相信它能帮你得到什么。 我还为您的测试添加了JSFIDLE链接，如下所示：

---

您需要使用绝对定位。您当前的CSS是什么？@HamidReza很高兴它有帮助，祝您好运！