Basically having some trouble with using Hover to hide or show an item.
使用Hover隐藏或显示项目时基本上遇到了一些麻烦。
The idea is simple, on hover show a div. When no longer hovering, hide it. Problem is if the mouse hovers over the div and leaves too quickly, the show/hide div will stay visible. I'm hoping this is something easily remedied and not a typical problem with the hover event.
这个想法很简单,在悬停时显示一个div。当不再盘旋时,隐藏它。问题是如果鼠标悬停在div上并且离开太快,show / hide div将保持可见。我希望这可以很容易地解决,而不是悬停事件的典型问题。
jQuery
(
function()
{
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover
(
function()
{
var children = jQuery(this).children(".slideDiv");
if (children.is(":hidden"))
{
children.show("slide", { direction: "left" }, 100);
}
},
function()
{
var children = jQuery(this).children(".slideDiv");
children.hide("slide", { direction: "left" }, 100);
}
);
}
);
Styles look like:
样式看起来像:
.mainDiv
{
margin:5px;
height:200px;
}
.slideDiv
{
background-color:Teal;
float:left;
height:200px;
position:absolute;
z-index:100;
}
And markup
<div class="mainDiv">
<div class="showDiv">
Hover me
</div>
<div class="slideDiv">
Do you see me?
</div>
</div>
<div class="clear"></div>
<div class="mainDiv">
<div class="showDiv">
Hover me too
</div>
<div class="slideDiv">
Do you see me now?
</div>
</div>
2 个解决方案
#1
Use the hoverIntent plugin. This avoids anything being shown if the user simply passes the mouse over the elements, and avoids an unsightly chain of animations.
使用hoverIntent插件。如果用户只是将鼠标悬停在元素上,则可以避免显示任何内容,并避免出现难看的动画链。
#2
I tried your script and it did as you described. I tried removing the children.is(":hidden") from your script, but the problem still occurred.
我尝试了你的脚本,就像你描述的那样。我尝试从您的脚本中删除children.is(“:hidden”),但问题仍然存在。
When I rewrote it the script the div never stays visible. So, it appears that the problem is with using jQuery's children instead of find to get to the object:
当我重新编写脚本时,div永远不会保持可见。所以,似乎问题在于使用jQuery的子代而不是找到对象:
Still has problems:
还有问题:
jQuery (
function(){
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover (
function() {
$(this).children(".slideDiv").show("slide", { direction: "left" }, 100);
},function(){
$(this).children(".slideDiv").hide("slide", { direction: "left" }, 100);
}
);
}
);
Works as intended:
按预期工作:
$(document).ready(function(){
$('.slideDiv').hide();
$('.mainDiv').hover(
function(){
$(this).find('.slideDiv').show('slide', { direction: 'left' }, 100)
},
function(){
$(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100)
}
)
})
And yes, The hoverIntent plugin is nice :P
是的,hoverIntent插件很不错:P
#1
Use the hoverIntent plugin. This avoids anything being shown if the user simply passes the mouse over the elements, and avoids an unsightly chain of animations.
使用hoverIntent插件。如果用户只是将鼠标悬停在元素上,则可以避免显示任何内容,并避免出现难看的动画链。
#2
I tried your script and it did as you described. I tried removing the children.is(":hidden") from your script, but the problem still occurred.
我尝试了你的脚本,就像你描述的那样。我尝试从您的脚本中删除children.is(“:hidden”),但问题仍然存在。
When I rewrote it the script the div never stays visible. So, it appears that the problem is with using jQuery's children instead of find to get to the object:
当我重新编写脚本时,div永远不会保持可见。所以,似乎问题在于使用jQuery的子代而不是找到对象:
Still has problems:
还有问题:
jQuery (
function(){
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover (
function() {
$(this).children(".slideDiv").show("slide", { direction: "left" }, 100);
},function(){
$(this).children(".slideDiv").hide("slide", { direction: "left" }, 100);
}
);
}
);
Works as intended:
按预期工作:
$(document).ready(function(){
$('.slideDiv').hide();
$('.mainDiv').hover(
function(){
$(this).find('.slideDiv').show('slide', { direction: 'left' }, 100)
},
function(){
$(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100)
}
)
})
And yes, The hoverIntent plugin is nice :P
是的,hoverIntent插件很不错:P