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

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为它付诸行动。