Crazy demo

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

jQuery：在悬停时隐藏div，在点击时保持可见

1 个答案:

Crazy demo