如何使用 jquery 在悬停/鼠标悬停时淡入 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17754852/
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
How to fade in a div on hover/mouseover using jquery?
提问by Sam D20
I have a div that is set to display:hidden. I want this div to be set to display:blockwhen a certain element (#navbar li a) is hovered over. Here is my javascript.
我有一个设置为display:hidden. display:block当某个元素 ( #navbar li a) 悬停在上面时，我希望将此 div 设置为。这是我的 javascript。
$('document').ready(function(){
$("#navbar li a").onmouseover(function{
$("#navbar ul").css("display","block");
});
});
I know that $("#navbar li a")is targeting the proper element, as I have tested this. Is there anything wrong with my javascript code?
我知道这$("#navbar li a")是针对正确的元素，因为我已经对此进行了测试。我的javascript代码有什么问题吗？
edit: this is a dropdown menu. #navbar ulis a nested list.
编辑：这是一个下拉菜单。#navbar ul是一个嵌套列表。
回答by Kevin Lynch
Use .hover
用 .hover
$('document').ready(function(){
$("#navbar li a").hover(function(){
$("#navbar ul").css("display","block");
});
});
If you would like a fade in effect then just use .fadeIn
如果您想要淡入效果，则只需使用 .fadeIn
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
For completeness here's a CSS only method:
为了完整起见，这里有一个仅限 CSS 的方法：
(FYI this using this method won't fade it as per say, just make it appear on hover and then disappear when not on hover.)
（仅供参考，使用这种方法不会像所说的那样褪色，只需让它出现在悬停时，然后在不悬停时消失。）
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
#div1:hover ~ #div2 {
display: block;
}
回答by drip
There is no "onmouseover"
没有“鼠标悬停”
The right syntaxsis is:
正确的语法是：
$("#navbar li a").on("mouseover", function(){
$("#navbar ul").show() //Can use just show here
})
回答by adeneo
Yes, there is something wrong with your code, jQuery doesn't have a onmouseoverevent, and what you're probably looking for is the mouseenterevent, as mouseoverfires continously on mousemove:
是的，您的代码有问题，jQuery 没有onmouseover事件，而您可能正在寻找的是mouseenter事件，因为mouseover在 mousemove 上连续触发：
$(document).ready(function(){
$("#navbar li a").on('mouseenter', function(){
$("#navbar ul").show();
});
});
on the other hand, you could probably do this with just CSS ?
另一方面，你可能只用 CSS 就可以做到这一点？
回答by North Gork
If you want the div to actually fade from opaque to 100% then you have start with opaque at say 80% (shown as 0.8) then fade to 100% (shown as 1.0). Since you want to start with a level of opacity the div needs to be hidden using "display none", the opaque level can then be set without the effect being seen, then make it visible and fade to 100%:
如果您希望 div 实际上从不透明淡化到 100%，那么您可以从不透明开始，例如 80%（显示为 0.8），然后淡化到 100%（显示为 1.0）。由于您想从一个不透明度级别开始，需要使用“显示无”隐藏 div，然后可以设置不透明级别而不看到效果，然后使其可见并淡入 100%：
$("div.mydivclass").on("mouseenter", function () {
$(this).css("display", "none");
$(this).fadeTo("fast", 0.8);
$(this).css("display", "");
$(this).fadeTo("10", 1.0);
});
回答by zod
all the answers are show / hide . your code too. Question is about fade in.
所有的答案都是显示/隐藏。你的代码也是。问题是关于淡入。
use .fadeIn().fadeOut instead show hide
使用 .fadeIn().fadeOut 代替显示隐藏
