隐藏和显示而不调整表元素的大小

Question

如果您注意到，上面是stackoverflow中的注释，上面的图像显示没有标记，而下面的图像显示当鼠标悬停评论时标记显示。该标志是隐藏/显示而不调整表格布局。但我通过使用下面的代码尝试了自己的方式，但它仍在调整大小。

<script>
$('document').ready(function()
{
    $('#hover').hover(function()
    {
        $('#flag').show();
    });
});

<table>
<tr>
    <td>
        <div id="hover">

            <div id="flag" style="display:none">
                <img src="flag.png"/>
            </div>

            <div>
                Hover me
            </div>
        </div>
    </td>
</tr>

在这里帮我解决这个问题。

Answer 1

在CSS中，您需要设置#flag元素的显式宽度，然后切换img本身的显示。

​#flag {
    width: 16px;
    height: 16px;
    float: left;
}

#flag > img {
    display: none;
}

然后你的jQuery代码得到了改进：

$(document).ready(function()
{
    $('#hover').mouseenter(function()
    {
        $('#flag > img').show();
    }).mouseleave(function()
    {
        $('#flag > img').hide();
    });
});

请参阅this jsFiddle了解它的实际效果。

Answer 2

hover为mouseenter和mouseout提供2个处理程序。当您只传递一个处理程序时，将为这两个事件执行相同的处理程序。因此，在您的情况下，标志将始终可见。你应该传递另一个处理程序来隐藏mouseout上的标志。另一个问题是您使用document作为字符串。从代码中删除引号。

$(document).ready(function()
{
    $('#hover').hover(function()
    {
        $('#flag').show();
    },
    function()
    {
        $('#flag').hide();
    });
});

<强> Demo

Answer 3

尝试更改HTML，如下所示：

<table>
    <tr>
        <td>
          <div id="hover">

            <div id="flag" style="display:none;float:left;">
                <img src="flag.png"/>
            </div>

            <div style="margin-left:18px">
                Hover me
            </div>
          </div>
</td>
</tr>
</table>

DEMO：http://jsfiddle.net/9agPb/1/

Answer 4

问题不在于代码，而在于方法。您应该拥有一个空的div，然后在悬停事件期间填充内容，而不是让display:none加上div。这是stackoverflow的方法，尽管使用td而不是div。

或者，您可以将display:none更改为visibility:hidden，因为后者不会从文档流中删除该项，因此在显示该项时不会调整大小。