javascript - jQuery:悬停时隐藏div，点击时保持可见

Question

我有几个 position: absolute; “按钮” display:block; <a>的和几个 position: absolute; div 中包含文本。 div 被 display:none; 隐藏了设置为默认值。

当您*将鼠标悬停*悬停在按钮上时，它旁边的 div(在代码中)应该出现(带有某种淡入淡出/滚动效果)，然后再次淡入淡出/滚动出来，如果您将光标从按钮上移开。

当您点击一个按钮时，它旁边的 div 应该保持可见(即 display:block;)。只有当您点击按钮或 div 本身时，它才会再次消失(将鼠标悬停在按钮或 div 上不会有任何改变)。

我认为这会很简单，但我无法让它发挥作用。

Answer 1

我对您的 html 有一点了解，这就是我得到它的方法。

html

<a href="#" class="mybutton">button</a>
<div class="mydiv">some text in it.</div>

jQuery

$('.mydiv').addClass('hover').click(function(){
     $(this).addClass('hover').fadeOut();
});

$('a.mybutton').click(function() {
    $('.mydiv').toggleClass('hover').show();
    // $('.mydiv').removeClass('hover').show();
}).hover(function() {
    $('.mydiv.hover').fadeIn();
}, function() {
    $('.mydiv.hover').fadeOut();
});

Crazy demo