div的jQuery悬停问题答案

【问题标题】：jQuery hover Issue with divdiv的jQuery悬停问题
【发布时间】：2015-04-14 19:42:39
【问题描述】：

我想在鼠标悬停在 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 不会显示已经可见的元素，并且您的元素在 jQuery 定义中是可见的，因为它们占用了空间。
你能说出你指定的那个标记是什么吗？

标签： javascript jquery html

【解决方案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>

【讨论】：

感谢您的建议。它有效，但我还有另一个问题；我在每一行都重复了这个。但是，显示/隐藏仅适用于第一行
您需要为每一行选择一个通用类，例如$('.container')。 ID 必须是唯一的。

【解决方案2】：

Visibility 不适合你。试试这个JSfiddler

show 和 hide 仅适用于 display 属性。

您的 html 中不应包含内联样式。

【讨论】：

【解决方案3】：

你可以试试这个吗？

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

【讨论】：