我有2个元素<ul>
和<div>
。
如果我将鼠标悬停在div上,我希望ul出现,当我鼠标移动div时,我想检查鼠标是否超过ul,如果不是,我想再次隐藏ul。
这是我在Chrome和Safari中运行的代码,但在Firefox中没有人知道可能导致此错误的原因吗?
$('.footer')
.mouseenter(function() {
$('ul#date').fadeIn();
})
.mouseleave(function(){
$('ul#date').hover(
function() {
$('ul#date').mouseleave(function() {
$('.footer').hover(
function() {
return;
},
function() {
$('ul#date').fadeOut();
}
);
});
},
function() {
$('ul#date').fadeOut();
}
);
});
修改 HTML标记
<div id="main-wrapper">
<div class="clearfix" id="main">
<div class="column" id="content">
<div class="section">
<h1 id="page-title" class="title">Titletest</h1>
<div class="region region-content">
<div class="block" id="block-system-main">
<div class="content">
<div typeof="sioc:Item foaf:Document" class="node" id="node-13">
<ul id="date" style="display: none;">
</ul>
</div><!-- /.node -->
</div>
</div><!-- /.block -->
</div><!-- /.region -->
</div>
</div><!-- /.section, /#content -->
</div>
</div>
<div class="footer"></div>
解
好的,多亏了我,我达到了预期的效果,这是感兴趣的人的代码。
$('.footer').hover(
function()
{
$('ul#date').stop();
if ($('ul#date:hidden'))
{
$('ul#date').fadeIn();
}
}
);
$('ul#date').mouseleave( function(){ $('ul#date').fadeOut(); });
答案 0 :(得分:1)
为什么不将ul#date
括在.footer
元素中,只需使用.hover()
上的.footer
功能来显示/隐藏<ul>
?
修改强> 添加了drupal标记。 尝试这样的事情:
$('.footer').hover(
if ($('ul#date').is(':hidden')) {
function(){
$('ul#date').fadeIn();
}
}
);
$('ul#date').mouseleave( function(){
$('ul#date').fadeOut();
});
答案 1 :(得分:0)
不应该是这个吗?
$('.footer').mouseenter(function(){
$('ul#date').fadeIn();
}).mouseleave(function(){
$('ul#date').hover(function(){
$('ul#date').mouseleave(function(){
$('.footer').hover(function(){
return;
}, function() {
$('ul#date').fadeOut();
});
}, function(){
$('ul#date').fadeOut();
}
);
});