jQuery悬停淡出/淡出/ slidetoggle

当我onhover我可以得到我需要的效果，但当我将鼠标移动到“我的列表”a标记，#bb div消失。我怎么能让它停留在那里，因为我需要点击它。jQuery悬停淡出/淡出/ slidetoggle

HTML：

<div id="aa">click</div> 
<div id="bb"> <a href="">my list</a></div>

的jQuery：

$('#bb').hide(); 
$('#aa').hover(function(){ 
    $('#bb').slideToggle(); 
});

这里

在线样本 - http://jsfiddle.net/9tjZK/

来源

2013-04-04 olo

'一个{背景：透明;}' – Ohgodwhy 2013-04-04 09:22:41

工作的jsfiddle这里 - http://jsfiddle.net/9tjZK/7/。

HTML：

<div id="container"> 
<div id="aa">click</div> 
<div id="bb"> <a href="">my list</a></div> 
</div>

的jQuery：

$('#bb').hide(); 
$('#aa').mouseenter(function(){ 
    $('#bb').fadeIn(); 
}); 

$('#container').mouseleave(function(){ 
    $('#bb').fadeOut(); 
});

来源

2013-04-04 09:29:49 lifetimes

更好的解决方案:-)非常感谢 – olo 2013-04-04 09:32:22

更改您的HTML，所以锚是你绑定的元素中鼠标输入/离开事件：

<div id="aa">click 
    <div id="bb"> 
     <a href="">my list</a> 
    </div> 
</div>

FIDDLE

来源

2013-04-04 09:26:33 adeneo

这完美地工作。我总是用这种方式..你不需要编写额外的代码 – 2013-04-04 09:32:47

你的HTML改成这样：

<div id="wrapper"> 
    <div id="aa">click</div> 
    <div id="bb"> <a href="">my list</a></div> 
</div>

和jQuery代码：

$('#bb').hide(); 

$("#wrapper").hover(
    function() { 
    $('#bb').stop(true, true).slideDown(); 
    }, 
    function() { 
    $('#bb').stop(true, true).fadeOut(); 
    } 
);

演示：http://jsfiddle.net/9tjZK/9/

来源

2013-04-04 09:31:21 Eli

olo，你可以尝试使用点击事件比悬停，这会给你想要的结果。

you can check here http://jsfiddle.net/9tjZK/8/

来源

2013-04-04 09:33:07 dreamweiver

jQuery悬停淡出/淡出/ slidetoggle

回答

相关问题