简单的颜色FadeInhoverJquery与WordPress网站
我希望在我的WordPress网站http://www.threecell.com/demo中加入以下Jquery Snippet（颜色淡入淡出）。 下面的代码基于我如何将其适应当前菜单标签结构。 我在我的functions.php文件中加载了Jquery。
$(document).ready(function(){ //Set the anchor link opacity to 0 and begin hover function $("#menu-sample-menu li a").hover(function(){ //Fade to an opacity of 1 at a speed of 200ms $(this).fadeOut(0).addClass('hover').fadeIn(300); //On mouse-off }, function(){ //Fade to an opacity of 0 at a speed of 100ms $(this).fadeOut(300) .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() }); }); }); 相关的菜单样式包括在这里：
#access { padding:0 20px; background:#111; box-shadow:0 0 7px rgba(0, 0, 0, .1); } #access ul { float:left; padding:0; margin:0; list-style:none; font-weight:600; text-transform:uppercase; } #access li { position:relative; float:left; padding:0; margin:0; } #access ul li:first-child { padding-left:0; } #access a { display:block; padding:15px 24px; color:#f0f0f0; text-decoration:none; } #menu-sample-menu li { color: black; text-shadow: 0px 1px 4px #777; background-color: green; padding: 0 12px 0 12px; } #menu-sample-menu li a.hover { background: orange; } #access li.current_page_item > a, #access li.current-menu-item > a { background: orange; color: white; text-decoration:none; } #access a span { color:#999; font-size:11px; font-style:italic; font-weight:normal; line-height:1.62em; text-transform:none; }
到目前为止，没有触发hover状态。 任何援助或指导都将非常感激。
最好的祝福，
Ť
我在这里创建了一个jsFiddle： http ： //jsfiddle.net/RV6fE/3/
它似乎工作正常。 我不得不从你的网站中提取菜单HTML（它在小提琴中看起来有点不稳定）。
看看你的网站，你有一个javascript错误：
未捕获的TypeError：对象[object Object]的属性’$’不是函数
我不确定究竟是什么导致了这个问题（看起来jQuery在这个脚本块之前被成功加载），但你可以尝试一件事。 在您上面粘贴的代码中，更改以下内容：
$(document).ready(function(){
对此：
jQuery(document).ready(function($){
我建议这样做的原因是你的网站上出现了另一个jquery块（我假设它是由你正在使用的主题注入的），它以这种方式设置document.ready事件。
应该将Jquery加载到一个单独的javascript文件中，将其链接到站点代码（header.php）的头部，如下所示：
或者在…内 标签也在页面的头部。
建议不要在functions.php文件中插入普通的javascript代码，因为它是Wordpress引擎上其他主要函数的核心，并为php代码结构保留。