Question

if you notice, above are comments in stackoverflow, the above image shows no flag while below image shows the flag shows when the mouse is hovering the comment. The flag is hide/show without resizing the table layout. But I have tried my own way by using below code but it still resizing.

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

Help me out here how to resolve this matter.

Answer 1

In your CSS, you need to set an explicit width of the #flag element, then toggle the display of the img itself.

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

#flag > img {
    display: none;
}

Then your jQuery code gets adapted:

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

See this jsFiddle for it in action.