jquery - 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

hover（）はここでうまく機能します：

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

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

Answer 2

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

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

デモ

Answer 3

はい、どうぞ

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 4

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

mouseoverとはmouseout別に使用することもできます。:animatedおよび.stop追加は、賢い人がマウスをアンカーの上に移動したり、アンカーから外したりするのを防ぐために行われます。

Answer 5

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

Answer 6

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

これはうまくいくはずです:)