如何显示鼠标悬停/隐藏分区时，分区设置为显示无，在GridView控件项模板 [英] how to show /hide div on mouseover when div set to display none, in gridview item template

问题描述

DIV框将页面加载时被隐藏，当我们将鼠标悬停在上面应该显示，的onmouseover它应该显示，和onmouseout它应该被隐藏。任何机构可以建议我怎么在jQuery的做，我是初学者jQuery的:)

更新这个div放置在GridView控件的ItemTemplate中。将它的工作？与answeered你的人提供？

 ＆LT; D​​IV ID =盒子的风格=显示：无＆GT;
   ＆LT; A HREF =＃类=BT btleft＆GT;突出它＆LT; / A＆GT;
   ＆LT; A HREF =＃类=BT btright＆GT;复位＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

解决方案

您最好使用Visible属性在CSS中，而不是显示：没有下手，因为显示：没有人会排序取出容器本身的空间

尝试了这一点。

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

您的HTML应该是这样

 ＆LT; D​​IV ID ='集装箱'＆GT;
 ＆LT; D​​IV ID =盒子的风格=visibility：hidden的＆GT;
 ＆LT; A HREF =＃类=BT btleft＆GT;突出它＆LT; / A＆GT;
 ＆LT; A HREF =＃类=BT btright＆GT;复位＆LT; / A＆GT;
 ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

您jQuery将看起来像这样

  $（＃集装箱）。悬停（函数（）{
$（＃容器div），CSS（知名度，可见）;
  }，
  功能（）{
    $（＃容器div），CSS（知名度，隐藏）。
  }）;
 

希望这有助于

box div will be hidden during pageload, when we hover on it it should display, onmouseover it should display, and onmouseout it should be hidden. can any body suggest me how to do in jquery, i am beginner in Jquery :)

Update this Div is placed in ItemTemplate of gridview. will it be worked ? with answeered which you people provide ?

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

解决方案

you are better off using visible property in CSS rather than display:none to start with because display:none will sort of remove the space of the container itself.

try this out

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

Your HTML should look like this

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

You jquery will look like this

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

Hope this helps

这篇关于如何显示鼠标悬停/隐藏分区时，分区设置为显示无，在GridView控件项模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！