jQuery 在悬停时显示 div - 在鼠标悬停时隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13574342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show div on hover - hide div on mouseout
提问by Alex Zahir
I have an anchor tag, which when hovered, I want a certain div ("mark") to show up. The div is NOT inside the anchor tag.
我有一个锚标记，当悬停时，我希望显示某个 div（“标记”）。div 不在锚标签内。
The HTML is as follows:
HTML如下：
<a href="#" class="mark"></a>
<div class="icontent">
<p>
lorem ipsum dolor sit amet......
</p>
</div>
When mouse is hovered on ".mark", ".icontent" should show up. When mouse is out, ".icontent" should hide again. Is it also possible to add a 1 second transition to it?
当鼠标悬停在“.mark”上时，应显示“.icontent”。当鼠标离开时，“.icontent”应该再次隐藏。是否也可以为其添加 1 秒过渡？
Thanks
谢谢
采纳答案by dmi3y
Here you are
这个给你
HTML
HTML
<a href="#" class="mark">hover anchor</a>
<div class="icontent">
<p>
lorem ipsum dolor sit amet......
</p>
</div>
JS
JS
(function(){
var del = 200;
$('.icontent').hide().prev('a').hover(function(){
$(this).next('.icontent').stop('fx', true).slideToggle(del);
});
})();
Example http://jsbin.com/evehat/1/edit
回答by Brian Duncan
hover() will work nicely here:
悬停（）在这里可以很好地工作：
$('.mark').hover(function() {$('.icontent').show(1000)}, function() {$('.icontent').hide(1000)});
回答by Zoltan Toth
回答by Explosion Pills
$(".mark").hover(function () {
if (!$(".icontent").is(":animated")) {
$(".icontent").show('slow');
}
}, function () {
$(".icontent").stop().hide('slow');
});?
You could also use mouseoverand mouseoutseparately. The :animatedand .stopadditions are done to prevent wise guys from moving their mouse over and o ut of the anchor repeatedly.
您也可以单独使用mouseover和mouseout。在:animated和.stop添加是为了防止明智的家伙来自与邻锚的UT反复移动他们的鼠标。
回答by Addramyr
$(".mark").mouseover(function() {
$('.icontent').fadeIn(1000);
}).mouseout(function(){
$('.icontent').fadeOut(1000);
});
回答by Alexander North
$('.mark').hover(function() {$('.icontent')).fadeIn(1000)},
function(){$('.icontent').fadeOut(1000)});
This should work :)
这应该有效:)
