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

问题

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>

回答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

回答2:

modify the html a bit like

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

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

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

DEMO

回答3:

wrap it in another div and bind a mouseover event on that 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();
   } 
 );

回答4:

Try this, the simplest one..

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

回答5:

Wrap the div with another div and add the code to that wrapped div:

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

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

});


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

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

});

来源：https://stackoverflow.com/questions/9372665/how-to-show-hide-div-on-mouseover-when-div-set-to-display-none-in-gridview-ite

标签

jquery

ASP.NET

onmouseover