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

cssを使用して絶対位置を指定し、何らかの理由でdivがtdの後ろにある場合は、z-indexを追加します。

于 2013-03-25T13:51:45.233 に答える
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.noを負の上部マージンに設定して、p＃priceとオーバーラップさせることができます

于 2013-03-25T14:07:55.430 に答える
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 に答える