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>

我在这里创造了一个小提琴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%;
}

Answer 2

这可以在不使用Javascript的情况下完成：

.bubble {
  position: relative;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  display:none;
}

.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%;
}

td:nth-child(2):hover .bubble {
  display:block;
}

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

Answer 3

您可以在显示右侧之前隐藏所有已打开的课程.bubble。

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

$("#bu tr td img").mouseover(function() {
    $(".bubble").hide(); // <-- this 
    $(this).nextAll(".bubble").first().show();
});

您可以在css上使用display: none并删除第一行。

在图像悬停显示div并隐藏鼠标上的div

3 个答案: