jQuery：在悬停时隐藏div，在点击时保持可见 [英] jQuery: hide div on hover, stay visible on click

问题描述

我有几个 position：absolute; buttons display：block; < a> '和一对位置：绝对; 包含文本的div。 div的隐藏由 display：none; 设置为默认。

$ b 当您* hover *悬停在一个按钮上，它旁边的div（在代码中）应该出现（带有某种淡入淡出/滚动效果），然后如果将光标从按钮上移开，淡出/再次滚出。 p>

在点击按钮时，它旁边的div应保持可见（即display：block;）。它应该只会再次消失，如果你点击按钮或div本身（悬停在按钮或div应该不会改变任何东西）。

我认为这将是直接的，但我不能得到它的工作。

解决方案

有一点你的html的知识，这是我如何得到它。

html

 < a href =＃class =mybutton>按钮< / a> 
< div class =mydiv>中的一些文字。< / div> 
  

jQuery

  $（'。mydiv'）。addClass（'hover'）。click（function（）{
 $（this）.addClass（'hover'）。fadeOut ）; 
}）; 
 $ b $（'a.mybutton'）。click（function（）{
 $（'。mydiv'）。toggleClass（'hover'）。show（）; 
 //（'。mydiv'）。removeClass（'hover'）。show（）; 
}）。hover（function（）{
 $（'。mydiv.hover'）。fadeIn ）; 
}，function（）{
 $（'。mydiv.hover'）。fadeOut（）; 
}）; 
  

疯狂演示

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.

When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.

When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).

I thought this would be straightforward, but I can't get it to work.

解决方案

with a little knowledge of your html, here's how I got it.

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

这篇关于jQuery：在悬停时隐藏div，在点击时保持可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！