javascript - 在图像上悬停显示 div 并在鼠标移出时隐藏 div

Question

我正在尝试在表格中显示数据列表，当用户将鼠标悬停在图标上时，图标下方会出现一个小 div，它提供了一些链接。

我遇到的问题是当图像悬停时隐藏的 div 出现但在我尝试单击该 div 之前消失了。当我将鼠标移出 div 时，我需要隐藏该 div。

而且当我将鼠标悬停时，div 会将内容向下推。我怎样才能避免它不推送内容？

JS

$('.bubble').hide();

$("#bu tr td img").hover(function() {
    $(this).nextAll(".bubble").first().show();
}, function(){
    $(this).nextAll(".bubble").first().hide();
});

HTML

<table id="bu">
<tr>
  <td>Data</td>
  <td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data</td>
  <td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Input</td>
  <td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Test</td>
  <td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>
</table>

我在这里创建了一个 fiddle https://jsfiddle.net/livewirerules/qks2vdpv/2/

任何帮助将不胜感激

Answer 1

试试这个。您不需要像其他人所说的那样需要 JS，但我添加了一些额外的定位，因此其余元素不会在悬停时移动。

HTML:

<table id="bu">
<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Input</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Test</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>
</table>

CSS:

.image {
  position: relative;
}
.image:hover .bubble {
  display: block;
}
.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}