how to show /hide div on mouseover when div set to display none, in gridview item template

Question

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>

Answer 1

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