[英]jQuery hover Issue with div
我想显示/隐藏鼠标悬停在div标签上的某些数据。
我的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>
我的jQuery:
<script>
$(document).ready( function() {
$("#container").hover(
function () {
$(this).children("div").show(100);
},
function () {
$(this).children("div").hide(100);
});
});
</script>
但是,悬停什么也不做! 请提出解决方法。
.show()
和.hide()
切换display
属性,而不是visibility
。 如果要设置可见性的动画,则可以设置opacity
CSS属性的动画:
$(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>
你可以试试这个吗?
$(document).ready( function() {
$("#container").hover(
function () {
$(this).children("div").css('visibility', 'visible');
},
function () {
$(this).children("div").css('visibility', 'hidden');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.