как показать / скрыть div при наведении курсора, когда для div задано отображение no, в шаблоне элемента gridview

Question

box div будет скрыто во время загрузки страницы, когда мы наведем на него курсор, он должен отобразиться, при этом он должен отобразиться, а при выводе он должен быть скрыт.Может ли кто-нибудь предложить мне, как это сделать в jquery, я новичок в Jquery :)

Обновление этого Div находится в ItemTemplate gridview.это будет работать?с ответом которые вы люди предоставите?

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

Answer 1

Вам лучше использовать свойство visible в CSS, а не display: не начинать ни с одного, потому что 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");
  });​

Надеюсь, это поможет

Answer 2

Попробуйте это, самое простое ..

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

Answer 3

оберните его в другом div и привяжите событие mouseover к этому 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();
   } 
 );

Answer 4

изменить 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

Answer 5

Оберните div другим div и добавьте к нему код, завернутый div:

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

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

});


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

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

});