jQuery悬停问题与div

时间:2015-04-14 19:42:40

标签: javascript jquery html

我想显示/隐藏鼠标悬停在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>

但是,悬停并没有做任何事情!请提出建议。

3 个答案:

答案 0 :(得分:4)

.show().hide()切换display属性,而不是visibility。如果要为可见性设置动画,可以为opacity CSS属性设置动画:

&#13;
&#13;
$(document).ready(function() {
  $("#container").hover(
    function() {
      $(this).children('div').animate({'opacity':'1'},100);
    },
    function() {
      $(this).children('div').animate({'opacity':'0'},100);
    });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

Visibility不适合您。试试这个JSfiddler

showhide仅适用于display属性。

你的html中不应该有内联样式。

答案 2 :(得分:0)

你能试试吗?

 $(document).ready( function() {
        $("#container").hover(
            function () {
                $(this).children("div").css('visibility', 'visible');
            },
            function () {
                $(this).children("div").css('visibility', 'hidden');
            });
    });