jQuery悬停Issue div

我想在鼠标悬停在div标签上显示/隐藏某些数据。jQuery悬停Issue 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>

但是，悬停不会做任何事情！请提出解决方法。

来源

2015-04-14 techspider

在最后一次关闭后有一个不可见的字节顺序标记，这是一个语法错误。 – adeneo

而'show'不会显示已经可见的元素，并且您的元素在jQuery定义中占据空间时可见。 – adeneo

你能告诉你指定的是什么吗？ – techspider

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

来源

2015-04-14 19:50:35 Blazemonger

感谢您的建议。它工作，但我有另一个问题;我在每一行都重复了这一点。但是，显示/隐藏仅适用于第一行 – techspider

您需要为每行选择一个公共类，如$（'。container'）'。 ID必须是唯一的。 – Blazemonger

我的傻问题:)感谢您的快速帮助。 – techspider

Visibility不会为你工作。试试这个JSfiddler

show和hide将只适用于display属性。

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

来源

2015-04-14 19:53:58 Tiago

你可以试试吗？

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

来源

2015-04-14 19:55:23 Sushil

jQuery悬停Issue div

回答

相关问题