jquery - 如图所示，我想要我的 td 中的 div

Question

我有这个 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>

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

鼠标进入前表格是这样的:

进入鼠标后，上面的代码会变成这样:

但是我想要的东西如下: 我该怎么做？

Answer 1

也许这可以帮助你:

我使用悬停而不是实时，因为您正在重新创建“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();
      });
  });

希望对您有所帮助!