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.
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. i need that div to hide when i take the mouse out of the div.
And also when i hover the div pushes the content down. How can i keep it in away that it doesnt push the content?
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>
I have created a fiddle over here 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.
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%;
}
This can be done without the use of 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>
You can hide all class .bubble
opened before show the right once.
$('.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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.