1

我有这个 HTML 代码：

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

我的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>

现在我想要特定高度的标签。让我用图片描述你：

在进入鼠标之前，表格是这样的： 在此处输入图像描述

输入鼠标后，上面的代码会这样： 在此处输入图像描述

但我想要的东西如下： 在此处输入图像描述 我该怎么做？

4

5 回答 5

2

也许这可以帮助你：

我使用悬停而不是实时，因为您正在重新创建“onElementEventMouse”，请在此处查看：http: //jsfiddle.net/9bbz5/

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>

CSS：

#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;
}

JS：

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

希望能帮助到你！

于 2013-03-25T14:13:34.883 回答
0

隐藏原始 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 文档：http: //api.jquery.com/clone/

于 2013-03-25T13:56:25.373 回答
0

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

于 2013-03-25T13:51:45.233 回答
0

让我们考虑css（仅用于临时目的）

.no{
    display:none;
    height:10px;
    width:10px;
    background-color:YELLOW;
}
#price{
    background-color: RED;
}

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();
});

试试这个代码，我相信它有助于你得到什么。我还为您的测试添加了 jsfiddle 链接，如下所示：http: //jsfiddle.net/CeYkx/1/

于 2013-03-25T14:14:10.587 回答
0

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

于 2013-03-25T14:07:55.430 回答