大きな問題があります。
css の ":hover" 属性を使用するだけでなく、メニュー ホバー アニメーションを流暢にする簡単な jQuery スクリプトを作成しました。問題は、どこでも機能するが、私のウェブサイトでは機能しないことです.
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);
});
});
問題は、私の Web サイト (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/
問題がどこにあるのかわからないのですが、おそらく実際には、Wordpress でメニューが PHP 経由で読み込まれるのでしょうか?
私は一日中それを理解しようとしましたが、成功しませんでした。私はあなたがその問題を処理するのを手伝ってくれることを願っています.