悬停时 JQuery 显示/隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5404775/
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/hide when hover
提问by jayjay
I have three links, Cat, Dog, Snakes. When I hover over each, the content relating to each link should change.
我有三个链接，猫，狗，蛇。当我将鼠标悬停在每个链接上时，与每个链接相关的内容应该会发生变化。
So if i hover over cat, then cat content will appear, if i hover over dog the cat content will smoothly disappear and the dog content will appear... and so on.
因此，如果我将鼠标悬停在 cat 上，则会出现 cat 内容，如果我将鼠标悬停在 dog 上，则猫内容将平滑消失，而狗内容将出现......等等。
Links are: Dog Cat Snake
<div>
<span style="display:none;"> Cat Content</span>
<span style="display:none;"> Dog Content</span>
<span style="display:none;"> Snake Content</span>
</div>
How do I get this to be full blown working, with some smooth fading?
我如何让这个功能完全成熟，并有一些平滑的褪色？
回答by Vivek
('.cat').hover(
function () {
$(this).show();
},
function () {
$(this).hide();
}
);
It's the same for the others.
其他人也一样。
For the smooth fade in you can use fadeInand fadeOut
对于平滑淡入，您可以使用fadeIn和fadeOut
回答by rsplak
jquery:
查询：
$('div.animalcontent').hide();
$('div').hide();
$('p.animal').bind('mouseover', function() {
$('div.animalcontent').fadeOut();
$('#'+$(this).attr('id')+'content').fadeIn();
});
html:
html：
<p class='animal' id='dog'>dog url</p><div id='dogcontent' class='animalcontent'>Doggiecontent!</div>
<p class='animal' id='cat'>cat url</p><div id='catcontent' class='animalcontent'>Pussiecontent!</div>
<p class='animal' id='snake'>snake url</p><div id='snakecontent'class='animalcontent'>Snakecontent!</div>
-edit-
-编辑-
yeah sure, here you go -- JSFiddle
是的，给你——JSFiddle
回答by Ivan Carrasco Quiroz
I hope my script help you.
希望我的剧本能帮到你。
<i class="mostrar-producto">mostrar...</i>
<div class="producto" style="display:none;position: absolute;">Producto</div>
My script
我的剧本
<script>
$(".mostrar-producto").mouseover(function(){
$(".producto").fadeIn();
});
$(".mostrar-producto").mouseleave(function(){
$(".producto").fadeOut();
});
</script>
回答by Tejs
Since you're using jQuery, you just need to attach to some specific events and some pre defined animations:
由于您使用的是 jQuery，您只需要附加到一些特定的事件和一些预定义的动画：
$('#cat').hover(function()
{
// Mouse Over Callback
}, function()
{
// Mouse Leave callback
});
Then, to do the animation, you simply need to call the fadeOut / fadeIn animations:
然后，要做动画，你只需要调用fadeOut/fadeIn动画：
$('#dog').fadeOut(750 /* Animation Time */, function()
{
// animation complete callback
$('#cat').fadeIn(750);
});
Combining the two together, you would simply insert the animations in the hover callbacks (something like so, use this as a reference point):
将两者结合在一起，您只需在悬停回调中插入动画（类似这样，使用它作为参考点）：
$('#cat').hover(function()
{
if($('#dog').is(':visible'))
$('#dog').fadeOut(750 /* Animation Time */, function()
{
// animation complete callback
$('#cat').fadeIn(750);
});
}, function()
{
// Mouse Leave callback
});
回答by Chetabahana
This code also works.
此代码也有效。
$(".circle").hover(function() {$(this).hide(200).show(200);});.circle{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:black;
line-height:100px;
text-align:center;
background:yellow
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="circle">hover me</div>