懸停時jquery浮動div

Question

我有的？

1. 一個有很多行的html表。

2. 隱藏（display = none）div包含一些輸入控件（讓我們稱之為“div-to-display”）。 整頁只有一個div-to-display。

我想做什么？

當鼠標懸停在每行的第一個單元格上時 - 在其下方顯示“div-to-display”（如工具提示）。

但是 ，我不能為每個表行創建一個單獨的div-to-display div。 所有單元格必須使用相同的“div-to-display”元素。

在顯示div-to-display div時，它應該是float。 這意味着它不會改變表中其他單元格的位置。 它將在他們之上。

你知道如何用jquery做到這一點嗎？

Answer 1

演示： http ： //jsfiddle.net/sBtxq/

JQuery的

// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');

CSS

.div-to-display {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
}
td {
    position: relative;
}
td:hover > .div-to-display {
    display: block
}

---

更新（非JS）版本

CSS

td {
    position: relative;
}
td:after {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
    content: "yay";
}
td:hover:after {
    display: block
}

演示： http ： //jsfiddle.net/sBtxq/20/

Answer 2

使用jquery offset（）方法獲取這些元素的懸停位置，並將其作為div的左側和頂部應用。 （確保將div定位為ABSOLUTE）。

Answer 3

自己設計風格

#div-to-display{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
z-index:99999;
display:none;
}

將此class="toHover"添加到您想要顯示div的每個或表行

添加此功能

  window.onload = function(){

    $('.toHover').each(function() {

         $(this).mouseenter(function(){ $('#div-to-display').show(); });
         $(this).mouseleave(function() { $('#div-to-display').hide();});
    });

}

Answer 4

如果您想要一個簡單的解決方案，請嘗試使用工具提示插件。 那里會有負載。 其中一個是jquery UI 工具提示插件 。

Answer 5

Html For ie

    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
    </table>
    <div id="divInput" style="display:none;position:absolute;">
        <input type="type" name="name" value=" " />
    </div>

jQuery的：

<script type="text/javascript">
    var s = 'ss';
    $('table tr').each(function () {
        var this_tr = $(this);
        this_tr.find('td:first').mouseenter(function () {
            var this_td = $(this);

            $('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
            $('#divInput').show();
        }).mouseout(function () {
            var this_td = $(this);
            $('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
            $('#divInput').hide();
        })
    })
</script>