如何使用jquery在鼠标悬停/悬浮时淡入一个div？

Question

我有一个设置为display:hidden的

元素。当鼠标悬停在某个元素（#navbar li a）上时，我希望将该

元素设置为display:block。以下是我的javascript代码。

$('document').ready(function(){
    $("#navbar li a").onmouseover(function{
        $("#navbar ul").css("display","block"); 
    }); 
}); 

我知道$("#navbar li a")是针对正确的元素进行定位，因为我已经测试过了。我的JavaScript代码有什么问题吗？

编辑：这是一个下拉菜单，#navbar ul是一个嵌套列表。

- Sam D20

Answer 1

使用 .hover。

$('document').ready(function(){
    $("#navbar li a").hover(function(){
        $("#navbar ul").css("display","block"); 
    }); 
}); 

如果您想要淡入效果，只需使用.fadeIn。 演示

$(function() {
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
});
});

完整性起见，以下是一种仅使用CSS的方法：

（FYI，使用此方法不会像淡出那样使其变暗，只会在鼠标悬停时显示，然后在鼠标未悬停时消失。）

演示

#div2 {
    width: 200px;
    height: 200px;
    background: red;
    display: none;
}

#div1:hover ~ #div2 {
    display: block;    
}

- Kevin Lynch

Answer 2

没有"onmouseover"

正确的语法是:

$("#navbar li a").on("mouseover", function(){
    $("#navbar ul").show() //Can use just show here
})

- drip

Answer 3

是的，你的代码有问题，jQuery没有onmouseover事件，你可能要寻找的是mouseenter事件，因为mouseover会在鼠标移动时不断触发：

$(document).ready(function(){
    $("#navbar li a").on('mouseenter', function(){
        $("#navbar ul").show();
    }); 
}); 

另一方面，你可能只需要使用CSS就可以实现这个功能？

- adeneo

Answer 4

所有答案都可以显示/隐藏。你的代码也是如此。

问题涉及淡入效果。

使用 .fadeIn() 代替 show hide .fadeOut

http://api.jquery.com/fadeIn/

- zod

Answer 5

如果你想让 div 从不透明度到 100% 淡出，那么你需要从 80% 的不透明度（表示为 0.8）开始，然后淡出到 100%（表示为 1.0）。由于你想要从不透明度开始，所以 div 需要使用 "display none" 进行隐藏，然后设置不透明度，而不会看到效果，然后使其可见并淡出到 100%：

 $("div.mydivclass").on("mouseenter", function () {
    $(this).css("display", "none");
    $(this).fadeTo("fast", 0.8);
    $(this).css("display", "");
    $(this).fadeTo("10", 1.0);
});

- North Gork