3

我有一个锚标记,当它悬停时,我希望显示某个 div(“标记”)。div 不在锚标签内。

HTML如下:

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

当鼠标悬停在“.mark”上时,应该会出现“.icontent”。当鼠标离开时,“.icontent”应该再次隐藏。是否也可以为其添加 1 秒过渡?

谢谢

4

6 回答 6

5

hover() 在这里可以很好地工作:

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

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

于 2012-11-26T22:40:05.130 回答
3
$(".mark").on({
    mouseover: function() {
        $(".icontent").stop().show(1000);
    },

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

演示

于 2012-11-26T22:38:20.400 回答
2

给你

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

于 2012-11-26T22:40:30.733 回答
1
$(".mark").hover(function () {
   if (!$(".icontent").is(":animated")) {
      $(".icontent").show('slow');
   }
}, function () {
   $(".icontent").stop().hide('slow');
});​

您也可以单独使用mouseovermouseout。添加和添加是为了防止:animated聪明.stop人反复将鼠标移出锚点。

于 2012-11-26T22:40:56.067 回答
0
$('.mark').hover(function()      {$('.icontent')).fadeIn(1000)},
function(){$('.icontent').fadeOut(1000)});

这应该工作:)

于 2012-11-26T22:40:04.990 回答
0
$(".mark").mouseover(function() {
    $('.icontent').fadeIn(1000);
}).mouseout(function(){
    $('.icontent').fadeOut(1000);
});
于 2012-11-26T22:40:56.830 回答