如何在悬停时增加元素的hitbox

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上得到它。看一下这些表，然后将鼠标悬停在一个元素上，例如 执行 ：

感觉非常顺畅和美好。我已经用开发人员工具查看了这个css，但找不到任何可以帮助我的东西..

Answer 1

有很多方法，实际上很难在不了解背景的情况下判断什么是最佳解决方案，所以这是一个基本提案：

span {
  display: block;
  padding: 10px;
}

你应该在一般情况下不要设置span元素的样式，但这适合你的例子。更好的方法是将文本包装在一个元素中并在那里设置样式。

填充将增加元素的“hitbox”/大小。

更好的解决方案：

JS

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

CSS

.hovering {
  padding: 10px;
}

HTML

<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"/>
<p class="hovering"><b>Lorem Ipsum</b></p>

Answer 2

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

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

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

Answer 3

您可以使用纯css实现此目的。将图像和文本放在div中，检测div何时悬停，然后使用:hover选择器隐藏/显示图像。

HTML

<div id="hoverhere">
  <img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg"/>
  <p>
    <b>Lorem Ipsum</b>
  </p>
</div>

CSS

 img{
  width: 200px;
  display: none;
  position: absolute;
  right: -200px;
  top: -100px;
}
#hoverhere{ 
  position: relative; 
  width: 100px;
  margin-top: 100px;
}
#hoverhere:hover img{
  display: block;
}
#hoverhere:hover p{
  text-decoration: underline;
}

小提琴

http://jsfiddle.net/L7L1bep6/1/

我更新了我的答案，以模仿您更密切关联的网站。