How to increase the hitbox of a elements on hover

Question

I want to hover over a text and display an image then. This works so far, but to be honest the "hitbox" is too small. The image is just getting shown when I actually hover over the text. I would be cool if one could make that hitbox taller. Is there any possible solution for this problem?

$(document).ready(function () {
    $('span').hover(function(){
        $(this).addClass('under_line');
    $(this).prev().show();
    },function(){
        $(this).removeClass('under_line');
    $(this).prev().hide();
    });
});

.is_hidden{
    display: none;
    position: absolute;
}
.under_line{
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<span><b>Lorem Ipsum</b></span>

I would love to have it like on this site. Have a look at these tables and then hover over an element like for example like Execute:

It feels so smooth and nice. I already looked with the developer tool into the css of this but couldn't find anything that helps me..

Answer 1

If I understand what you are trying to do correctly, you could try adding some padding and negative margin to your CSS like so:

span {
   padding: 30px;
   margin: -30px;
}

This will make the element 30px larger on each side, but the negative margin will allow the surrounding text to not be pushed away by the same 30px amount.