jQuery在懸停時顯示div - 在鼠標懸停時隱藏div

Question

我有一個錨標記，當它懸停時，我想要顯示某個div（「標記」）。 div不在錨標籤內。

的HTML如下：

 <a href="#" class="mark"></a> 
      <div class="icontent"> 
       <p> 
       lorem ipsum dolor sit amet...... 
       </p> 
      </div> 

當鼠標在 「.mark」 徘徊 「.icontent」 應該顯示。當鼠標不在時，「.icontent」應該再次隱藏。是否也可以向其添加1秒的轉換？

感謝

Answer 1

給你

HTML

<a href="#" class="mark">hover anchor</a> 
<div class="icontent"> 
    <p> 
    lorem ipsum dolor sit amet...... 
    </p> 
</div> 

JS

(function(){ 
    var del = 200; 
    $('.icontent').hide().prev('a').hover(function(){ 
    $(this).next('.icontent').stop('fx', true).slideToggle(del); 
    }); 
})(); 

例 http://jsbin.com/evehat/1/edit

Answer 2

$(".mark").on({ 
    mouseover: function() { 
     $(".icontent").stop().show(1000); 
    }, 

    mouseout: function() { 
     $(".icontent").stop().hide(1000); 
    } 
}) 

DEMO

Answer 3

$('.mark').hover(function()  {$('.icontent')).fadeIn(1000)}, 
function(){$('.icontent').fadeOut(1000)}); 

這應該工作:)

Answer 4

懸停（）將很好的工作在這裏：

$('.mark').hover(function() {$('.icontent').show(1000)}, function() {$('.icontent').hide(1000)}); 

http://api.jquery.com/hover/

Answer 5

$(".mark").hover(function() { 
    if (!$(".icontent").is(":animated")) { 
     $(".icontent").show('slow'); 
    } 
}, function() { 
    $(".icontent").stop().hide('slow'); 
});​ 

您也可以使用mouseover的d mouseout分開。 :animated和.stop的添加是爲了防止聰明人將鼠標移動並重復錨點。

Answer 6

$(".mark").mouseover(function() { 
    $('.icontent').fadeIn(1000); 
}).mouseout(function(){ 
    $('.icontent').fadeOut(1000); 
});