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

【问题标题】：how to show /hide div on mouseover when div set to display none, in gridview item template在gridview项目模板中，当div设置为不显示时如何在鼠标悬停时显示/隐藏div
【发布时间】：2012-02-21 05:31:07
【问题描述】：

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>

【问题讨论】：

如果它的隐藏、隐藏元素没有可见区域可以结束，你如何定义它被“覆盖”。
不能悬停在不存在的东西上。如果 div 被隐藏，则需要另一个触发器。
如果您使用 CSS 的可见性属性而不是 display:none，那么您可以。能见度保持在空间上。从我的回答中检查我的 jsfiddle。干杯！

标签： jquery asp.net onmouseover

【解决方案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");
  });

希望对你有帮助

【讨论】：

你能检查更新的问题吗，我已经在gridview的itemtemplate中放置了div
'itemTemplate of gridview' 没有向不使用 gridview 的人描述实际的 DOM 节点。只要您将容器元素替换为实际的容器元素，此技术就可以正常工作。
@JaspreetChahal 那么每当我悬停它时，所有 div 都会显示？假设会有 100 行，如果我将它悬停在一行上，它会显示所有行吗？
@ravi 它回答你的问题了吗？干杯哥们！
此解决方案存在隐藏块大小的问题。

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

【讨论】：

你能检查更新的问题吗，实际上我已经在gridview的itemtemplate中放置了div
无论放置在何处，您都需要定义可见的悬停事件处理程序，就像在我的回答中一样，我已将其附加到可见 div，同样您可以将处理程序附加到网格的某些可见元素

【解决方案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();
   } 
 );

【讨论】：

检查我更新的问题，我已经把它放在 gridview itemptemplate 列中
如果 asp.net 不和 js 混在一起就可以了，我建议你自己试试。

【解决方案4】：

试试这个，最简单的..

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

【讨论】：

【解决方案5】：

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

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

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

});


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

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

});

【讨论】：

根据其他答案，div 是隐藏的。不能悬停在它上面。另外，“鼠标悬停”是一种很好的绑定方式吗？为什么不直接使用 .hover()（封装了 mouseenter 和 mouseleave）或者至少使用并行绑定类型。