5

我有一个 div 设置为display:hidden. 我希望将此 div 设置为display:block当某个元素 ( #navbar li a) 悬停时。这是我的javascript。

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

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

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

4

5 回答 5

8

利用.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 方法：

（仅供参考，使用这种方法不会按照说的那样淡化它，只需让它出现在悬停时，然后在不悬停时消失。）

演示

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

#div1:hover ~ #div2 {
    display: block;    
}
于 2013-07-19T20:26:36.553 回答
3

没有“鼠标悬停”

正确的语法是：

$("#navbar li a").on("mouseover", function(){
    $("#navbar ul").show() //Can use just show here
})
于 2013-07-19T20:25:54.200 回答
2

是的，您的代码有问题，jQuery 没有onmouseover事件，而您可能正在寻找的是mouseenter事件，因为mouseover在 mousemove 上不断触发：

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

另一方面，您可能只用 CSS 就可以做到这一点？

于 2013-07-19T20:26:03.080 回答
2

如果您希望 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);
});
于 2015-08-03T00:28:34.987 回答
1

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

使用 .fadeIn() .fadeOut 代替显示隐藏

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

于 2013-07-19T20:30:21.123 回答