[英]on image hover show div and hide the div on mouse out
Im trying show a list of data in a table where when the user hovers the icon a small div appears below the icon which gives some links. 我试图在表中显示数据列表,当用户将鼠标悬停在该图标上时,图标下方会出现一个小div,它提供了一些链接。
The problem that im having is when the image is hovered the hidden div appears but disappears before i try to click on that div. 我有的问题是,当图像悬停时,隐藏的div出现了,但是在我尝试单击该div之前消失了。 i need that div to hide when i take the mouse out of the div. 当我将鼠标移出div时,我需要隐藏该div。
And also when i hover the div pushes the content down. 而且,当我将鼠标悬停在div时,其内容也会降低。 How can i keep it in away that it doesnt push the content? 我如何保持它不会推送内容?
JS JS
$('.bubble').hide();
$("#bu tr td img").hover(function() {
$(this).nextAll(".bubble").first().show();
}, function(){
$(this).nextAll(".bubble").first().hide();
});
HTML 的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>
I have created a fiddle over here https://jsfiddle.net/livewirerules/qks2vdpv/2/ 我在这里创建了一个小提琴https://jsfiddle.net/livewirerules/qks2vdpv/2/
Any help will be appreciated 任何帮助将不胜感激
Try this. 尝试这个。 You don't need JS like everyone else said but I added some additional positioning so the rest of the elements don't shift on hover. 您不需要像其他所有人所说的JS,但是我添加了一些附加的位置,因此其余元素不会在悬停时发生变化。
HTML: 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: 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%;
}
This can be done without the use of Javascript: 无需使用Java脚本即可完成此操作:
.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>
You can hide all class .bubble
opened before show the right once. 您可以隐藏所有打开的类.bubble
然后再显示一次。
$('.bubble').hide();
$("#bu tr td img").mouseover(function() {
$(".bubble").hide(); // <-- this
$(this).nextAll(".bubble").first().show();
});
You can use display: none
on your css and remove your first line. 您可以使用display: none
css上display: none
并删除第一行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.