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>

how would you define it being "over" it if its hidden, hidden elements have no visible area to be over. — j_mcnally, Feb 21 '12 at 05:33
Can't hover on what's not there. You need another trigger if the div is hidden. — Scott, Feb 21 '12 at 05:35
well you can if you are using visibility property of CSS rather than display:none. visibility holds on to the space. Check my jsfiddle from my answer. Cheers! — Jaspreet Chahal, Feb 21 '12 at 05:44

score 7 · Accepted Answer · answered Feb 21 '12 at 05:43

7

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

answered Feb 21 '12 at 05:43

Jaspreet Chahal

2,759
1
15
17

can you check updated question, i have placed div in itemtemplate of gridview – Ravi Gadag Feb 21 '12 at 05:49
'itemTemplate of gridview' doesn't describe actual DOM nodes to people who don't use gridview. This technique will work fine as long as you substitute the container element for your actual container element. – Greg Pettit Feb 21 '12 at 05:52
@JaspreetChahal then whenever i hover it all div will be shown ? suppose 100 rows will be there, if i hover it on one row, will it show all row ? – Ravi Gadag Feb 21 '12 at 05:56
@ravi does it answer your question? Cheers buddy! – Jaspreet Chahal Feb 21 '12 at 07:17
This solution have issue with size of hidden block. – xoxn-- 1'w3k4n Dec 03 '15 at 18:09

score 1 · Answer 2 · answered Feb 21 '12 at 05:34

1

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

answered Feb 21 '12 at 05:34

JIA

1,485
13
11

can you check the updated question, acutally i have placed div in itemtemplate of gridview – Ravi Gadag Feb 21 '12 at 05:48
where ever it is placed you need to define the hover event handler that is visible like in my answer i have attached it to the visible div similarly you can attach the handler to some visible element of your grid – JIA Feb 21 '12 at 05:51

score 1 · Answer 3 · answered Feb 21 '12 at 05:34

1

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();
   } 
 );

answered Feb 21 '12 at 05:34

Shaheer

2,105
4
25
39

check i updated question, i have placed it in gridview itemptemplate column – Ravi Gadag Feb 21 '12 at 05:48
if asp.net doesn't messes with js then it would work fine, i would recommend you to try it yourself. – Shaheer Feb 21 '12 at 05:53

score 1 · Answer 4 · answered Feb 21 '12 at 05:42

1

Try this, the simplest one..

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

answered Feb 21 '12 at 05:42

Akhil Thayyil

9,263
6
34
48

score 0 · Answer 5 · edited Jul 23 '12 at 18:38

0

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();

});

edited Jul 23 '12 at 18:38

Josh Darnell

11,304
9
38
66

answered Feb 21 '12 at 05:37

Kanishka Panamaldeniya

17,302
31
123
193

As per other answers, the div is hidden. Can't hover over it. Also, is "mouseover hover" a good way to bind? Why not just use the .hover() (which encapsulates mouseenter and mouseleave) or at least use parralel binding types. – Greg Pettit Feb 21 '12 at 05:42

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

5 Answers5

Linked