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