如图所示,我想从我的td中取出div

时间:2013-03-25 13:49:43

标签: jquery html css

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

现在我希望标签处于特定高度。 让我在图片中描述你:

在进入鼠标之前,表格如下: enter image description here

输入鼠标后,上面的代码会这样: enter image description here

但我希望得到以下内容: enter image description here 我怎么能这样做?

5 个答案:

答案 0 :(得分:2)

也许这可以帮到你:

我使用hover而不是live,因为你正在重新创建一个“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();
      });
  });

希望它有所帮助!

答案 1 :(得分:0)

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

答案 2 :(得分: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/

答案 3 :(得分:0)

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

重叠

答案 4 :(得分: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/