我有一个大问题。
我编写了一个简单的jQuery脚本,使菜单悬停动画流畅,而不仅仅是使用css“:hover”属性。问题在于它可以在任何地方使用,但不能在我的网站上使用。
header.php中的HTML:
<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</div>
示例前端HTML代码:
<div id="nav">
<div class="menu-menu-glowne-container">
<ul id="menu-menu-glowne" class="menu">
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-23"><a href="link">Page Name</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-23"><a href="link">Page Name</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-23"><a href="link">Page Name</a></li>
</ul>
</div>
</div>
CSS:
#nav ul {
width: auto;
margin-left: 15px;
}
#nav ul li {
display: inline-block;
width: auto;
}
#nav ul li a {
display: block;
height: 20px;
font: 16px Arial;
text-decoration: none;
color: #a8a8a8;
border-right: 1px solid #e9e9e9;
padding: 20px 20px;
margin-left: -3px;
}
#nav ul li a:hovser {
color: #f1f1f1;
border-right: 1px solid #a8a8a8;
text-shadow: none;
box-shadow: 1px 1px 10px 1px #d1d1d1;
}
脚本本身:
jQuery(function () {
jQuery('#nav li a').hover(
function(){
jQuery(this).animate({backgroundColor: '#a8a8a8', color: '#f1f1f1'}, 300);
}, function(){
jQuery(this).animate({backgroundColor: '#f1f1f1', color: '#a8a8a8'}, 300);
});
});
问题是它在我的网站上不起作用:cow-art [dot] pl。在JSFiddle中它运行得很好,但在jQuery 1.6.2上使用jQuery UI 1.8.4:http://jsfiddle.net/kT95d/115/
在jQuery 1.10.1上:http://jsfiddle.net/9nzzr/2/
我不知道问题出在哪里,也许事实上,菜单是通过PHP在Wordpress中加载的?
我整天都想弄明白,但没有成功。我希望你能帮我解决这个问题。