div的jQuery懸停問題

Question

我想顯示/隱藏鼠標懸停在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>

但是，懸停什么也不做！ 請提出解決方法。

Answer 1

.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> 

Answer 2

Visibility對您不起作用。 試試這個JSfiddler

show和hide僅適用於display屬性。

您的HTML中不應包含內聯樣式。

Answer 3

你可以試試這個嗎？

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