在 gridview 项目模板中，当 div 设置为不显示时，如何在鼠标悬停时显示/隐藏 div

Question

box div 将在页面加载期间隐藏，当我们将鼠标悬停在其上时，它应该显示，onmouseover 时它应该显示，onmouseout 时它应该隐藏。任何人都可以建议我如何在 jquery 中执行此操作，我是 Jquery 的初学者:)

更新此 Div 放置在 gridview 的 ItemTemplate 中。会起作用吗？你们提供了哪些答案？

<div id="box" style="display: none">
   <a href="#" class="bt btleft">Highlight it</a>
   <a href="#" class="bt btright">Reset</a>
</div>

Answer 1

你最好在CSS中使用visible属性，而不是从display:none开始，因为display:none会删除容器本身的空间。

试试这个

http://jsfiddle.net/sfUHn/7/

您的 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 看起来像这样

 $("#container").hover(function () {
$("#container div").css("visibility","visible");
  },
  function () {
    $("#container div").css("visibility","hidden");
  });​

希望这有帮助

Answer 2

修改html有点像

<div id="hover">hover</div>
<div id="box" style="display: none">
   <a href="#" class="bt btleft">Highlight it</a>
   <a href="#" class="bt btright">Reset</a>
</div>

jquery部分

$("#hover").hover(function(){
  $("#box").slideDown();

},function(){
     $("#box").slideUp(); 
});

DEMO

Answer 3

将其包装在另一个 div 中并在该 div 上绑定鼠标悬停事件

<div id='parent-wrapper'>
  <div id="box" style="display: none">
     <a href="#" class="bt btleft">Highlight it</a>
     <a href="#" class="bt btright">Reset</a>
  </div>
</div>

$('#parent-wrapper')
 .mouseover( 
   function() {
    $('#box').show();
   } 
 );

Answer 4

试试这个，最简单的..

$("#box").hover(function()
{
  $(this).show();
},
function()
{
  $(this).hide();
});

Answer 5

用另一个 div 包裹 div 并将代码添加到包裹的 div 中：

$('#wrapper').bind('mouseover hover', function(){

     $('#box').show();

});


$('#wrapper').mouseout(funcion(){

    $('#box').hide();

});