javascript - jquery浮动div悬停

Question

我有的？

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

2. 一个隐藏的（显示=无）div，其中包含一些输入控件（我们称之为“div-to-display”）。整个页面只显示一个 div。

我想做什么？

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

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

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

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

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

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

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

}

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>