gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 09:39:26 29 4
gpt4 key购买 nike

我正在尝试在表格中显示数据列表,当用户将鼠标悬停在图标上时,图标下方会出现一个小 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/

任何帮助将不胜感激

最佳答案

试试这个。您不需要像其他人所说的那样需要 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%;
}

关于javascript - 在图像上悬停显示 div 并在鼠标移出时隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40050993/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com