Question

我在编码和CSS方面非常陌生，而且我想做的就是当我将鼠标悬停在它上面时使下拉菜单淡入，而不是突然出现。以下是我正在寻找的一个例子：

但是当我尝试将这个脚本（从上面的jsfiddle示例）应用到我的wordpress时，没有任何反应：

jQuery(document).ready(function () {

        $('#subList').hide();

        $(".menu ul li").hover(function(){
         $(this).children("ul").stop().fadeIn("slow");
   },
   function(){
         $(this).children("ul").stop().fadeOut("slow");   
})
    });

我也尝试在我的CSS样式表的底部添加它：

.main-navigation li ul li { 
 opacity:0; 
 transition:opacity 0.3s linear; 
 -webkit-transition:opacity 0.3s linear; 
 -moz-transition:opacity 0.3s linear; 
 -o-transition:opacity 0.3s linear; 
}

.main-navigation li:hover > ul li { 
 opacity:1;

......无济于事。我进行了搜索和搜索，但我找到的答案都没有找到。我可能会错过一些非常明显的东西，一旦你指出它就会感到非常愚蠢，但我不能为我的生活弄清楚它是什么。

不确定您是否需要不同的部分，但这里有一些我的CSS：

.header_menu {  max-width: 1000px; float: left; margin-top: 315px; margin-left: -420px;}
.header_menu ul { list-style-type: none; margin: 0; padding: 0; }
.header_menu ul li { float: left; margin-left: 10px; font-size: 15px; position: relative; text-transform: uppercase; }
.header_menu ul li a { color: #999; text-decoration: none; padding: 4px 15px; display: block;  }
.header_menu ul li.current-menu-item a, 
.header_menu ul li.current_page_item a, 
.header_menu ul li a:hover { background-color: #fff; color: #333; }
.header_menu ul li ul { position: absolute; top: 24px; left: 0; border: 1px solid     #dfdfdf; background-color: #ffffff; padding: 5px 3px; display: none; z-index: 25; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); opacity: 0.95; -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s; }
.header_menu ul li ul li { width: 140px; font-size: 13px; margin: 0; padding: 3px 0; border-top: 1px solid #efefef; }
.header_menu ul li ul li:first-child { border-top: none; }
.header_menu ul li ul li.current-menu-item a, 
.header_menu ul li ul li.current_page_item a, 
.header_menu ul li ul li a { color: #b2b2b6; background: none; }
.header_menu ul li ul li.current-menu-item a:hover, 
.header_menu ul li ul li.current_page_item a:hover, 
.header_menu ul li ul li a:hover { background: none; color: #000; }

这是我试图应用它的地方。这是我的Wordpress网站，它属于＆＃34;类别＆＃34;菜单项：

www.mirandameeks.com

非常感谢您的时间和帮助，我们将非常感谢您提出的任何想法！

Answer 1

你可以通过使用CSS3的过渡效果来实现这一点，如下所示：

li ul
{
    opacity: 0;
    transition: opacity 1s linear 0s;
    -webkit-transition: opacity 1s linear 0s;
}
li:hover ul
{
    opacity: 1;
}

不需要脚本..只需删除您的脚本并仅在您的小提琴中应用此CSS ...它可能有用..

注意：如果您在菜单中输出鼠标时不需要动画，则仅在悬停状态下使用过渡效果，如下所示：这将仅在悬停时应用动画。

li ul
{
    opacity: 0;
}
li:hover ul
{
    opacity: 1;
    transition: opacity 1s linear 0s;
    -webkit-transition: opacity 1s linear 0s;
}

Answer 2

在您提供的示例小提示中，在此代码中$(".menu ul li").hover(function() .menu是div元素的类名，而在您的页面中.menu是类名ul元素。所以我，你应该这样做

$(".menu li").hover(function()

同时将$('#subList').hide();更改为$('.sub-menu').hide();

下拉菜单淡入？

2 个答案: