html - 如何在悬停时增加元素的命中框

Question

我想将鼠标悬停在文本上然后显示图像。到目前为止这是有效的，但老实说，“hitbox”太小了。当我实际将鼠标悬停在文本上时，图像才显示出来。如果有人能让那个 Hitbox 更高，我会很酷。这个问题有什么可能的解决方案吗？

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

我很想在 this site 上看到它.查看这些表格，然后将鼠标悬停在一个元素上，例如 Execute:

感觉很顺滑，很舒服。我已经使用开发人员工具查看了它的 css，但找不到任何对我有帮助的东西..

Answer 1

如果我理解您正在尝试正确执行的操作，您可以尝试向您的 CSS 添加一些填充和负边距，如下所示:

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

这将使元素的每一侧都大 30px，但负边距将允许周围的文本不会被推开相同的 30px 量。