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

疯狂的演示