jQuery鼠标悬停显示div - 鼠标移出隐藏div

Question

我有一个锚点标签，当鼠标悬停在上面时，我想让某个特定的div（“mark”）出现。该div并不在锚点标签内。

HTML代码如下：

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

当鼠标悬停在“.mark”上时，“.icontent”应该出现。当鼠标移开时，“.icontent”应该再次隐藏。是否还可以添加1秒的过渡效果？谢谢。

- Alex Zahir

Answer 1

在这里，hover()函数可以完美地工作：

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

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

- Brian Duncan

---

对我来说可以工作，但是那个页面上没有'class'为'mark'或'icontent'的内容。 - Brian Duncan

Answer 2

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

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

DEMO

- Zoltan Toth

---

如果出现多次悬停，则会重复执行操作，因此需要在外部进行停止。 - dmi3y

Answer 3

Here you are

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

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

- dmi3y

---

未捕获的引用错误：$ 未定义。 - dmi3y

（function(){ var del = 200; $('.info').hide().prev('.question-mark').hover(function(){ $(this).next('.info').stop('fx', true).slideToggle(del); }); })(); 运行正常。 - dmi3y

Answer 4

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

您也可以单独使用mouseover和mouseout。添加:animated和.stop是为了防止聪明的人反复在锚点上移动鼠标。

- Explosion Pills

---

@dmi3y 谢谢，问题问错了。但现在我丢失了我想要链接的 jQuery 示例！ - Explosion Pills

Answer 5

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

这应该可以工作 :)

- ABC

Answer 6

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

- Addramyr