jquery浮动div悬停答案

【问题标题】：jquery floating div on hoverjquery浮动div悬停
【发布时间】：2013-09-13 09:42:53
【问题描述】：

我有什么？

一个有很多行的 html 表。
一个隐藏的 (display=none) div，其中包含一些输入控件（我们称之为“div-to-display”）。整个页面只显示一个 div。

我要做什么？

当鼠标悬停在每行的第一个单元格上时 - 在其下方显示“div-to-display”（如工具提示）。

但是，我不能为每个表格行创建一个单独的 div-to-display div。所有单元格必须使用相同的“div-to-display”元素。

在显示 div-to-display div 时，它应该是浮动的。这意味着它不会更改表格中其他单元格的位置。它将在他们之上。

你知道如何使用jquery`javascript` 来做到这一点吗？

【问题讨论】：

请显示一些您尝试过的代码？
你能把你拥有的东西和你想做的事
太抽象了...添加代码，否则您将得不到答案。
查看 jquery offset()
我认为这是可以使用绝对定位的时候，然后您可以使用position() 或offset() jQuery 方法以 JSON 格式返回元素的位置值，以进行所需的操作和设置。您可以在文档中阅读更多内容。

标签： javascript jquery hover

【解决方案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/

【讨论】：

感谢这个非 js 版本的百万！正是我需要的！
这正是我一直在寻找的。非常感谢：D

【解决方案2】：

使用 jquery offset() 方法获取这些元素的悬停位置并将其应用为 div 的左侧和顶部。（确保将 div 定位为 ABSOLUTE）。

【讨论】：

【解决方案3】：

如果您想要一个简单的解决方案，请尝试使用工具提示插件。那里会有可用的负载。其中之一是 jquery UI tooltip plugin。

【讨论】：

【解决方案4】：

自己设计样式

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

}

【讨论】：

【解决方案5】：

Html For i.e.

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

【讨论】：