title: How to increase the hitbox of a elements on hover
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('span').hover(function(){
          $(this).addClass('under_line');
      $(this).prev().show();
      },function(){
          $(this).removeClass('under_line');
      $(this).prev().hide();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.is_hidden{
      display: none;
      position: absolute;
  }
  .under_line{
      text-decoration: underline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/&gt;
  &lt;span&gt;&lt;b&gt;Lorem Ipsum&lt;/b&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would love to have it like on <a href="http://www.hearthpwn.com/decks/386427-top-8-control-full-guide-by-mariohs" rel="nofollow noreferrer">this site</a>. Have a look at these tables and then hover over an element like for example like <strong><em>Execute</em></strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/sHkCD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sHkCD.png" alt="enter image description here"></a></p>
  
  <p>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..</p>