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

我有一个div设置为

display:hidden

。当某个元素（

#navbar li a

）悬停在上方时，我希望将此div设置为

display:block

。这是我的javascript

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

我知道，

$（“#navbar li a”）

针对的是正确的元素，因为我已经测试过了。我的javascript代码有什么问题吗

编辑：这是一个下拉菜单<代码>#导航栏ul是一个嵌套列表

没有“onmouseover”

正确的分类是：

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

---

是的，您的代码有问题，jQuery没有

onmouseover

事件，您可能要查找的是

mouseenter

事件，因为

mouseover

会在mousemove上连续触发：

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

---

另一方面，您可能只需要CSS就可以做到这一点。

使用

.hover

$（'document'）.ready（函数（）{
$（“#navbar li a”）.hover（函数（）{
$（“#navbar ul”）.css（“显示”、“块”）；
}); 
}); 

如果您想要淡入效果，只需使用

.fadeIn

$（函数（）{
$（'#div1'）。悬停（函数（）{
$（'#div2'）.fadeIn（）；
}，函数（）{
$（'#div2'）.fadeOut（）；
});
});

为了完整起见，这里有一个仅限于CSS的方法：

（仅供参考，使用此方法不会使其褪色，只需使其在悬停时显示，然后在不悬停时消失。）

#div2{
宽度：200px；
高度：200px；
背景：红色；
显示：无；
}
#div1：悬停~#div2{
显示：块；
}

所有答案都显示/隐藏。你的代码也是。 问题是关于淡入

使用

.fadeIn（）

.fadeOut代替show hide

---

如果你想让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);
});