I want to show/hide certain data on mouse hover over a div tag.
My html:
<div id='container'>
<div id="box" style="visibility: hidden">
<a href="#" class="bt btleft">Highlight it</a>
<a href="#" class="bt btright">Reset</a>
</div>
</div>
My jquery:
<script>
$(document).ready( function() {
$("#container").hover(
function () {
$(this).children("div").show(100);
},
function () {
$(this).children("div").hide(100);
});
});
</script>
But, hover doesn't do anything!! Please suggest the way around.
.show()
and .hide()
toggle the display
property, not visibility
. If you want to animate visibility, you could animate the opacity
CSS property:
$(document).ready(function() { $("#container").hover( function() { $(this).children('div').animate({'opacity':'1'},100); }, function() { $(this).children('div').animate({'opacity':'0'},100); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='container'> <div id="box" style="opacity: 0"> <a href="#" class="bt btleft">Highlight it</a> <a href="#" class="bt btright">Reset</a> </div> </div>
Visibility
will not work for you. Try this JSfiddler
show
and hide
will only work for display
properties.
You should not have inline styles in your html.
Can you try this?
$(document).ready( function() {
$("#container").hover(
function () {
$(this).children("div").css('visibility', 'visible');
},
function () {
$(this).children("div").css('visibility', 'hidden');
});
});
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.