onMouseOverイメージの交換UL内のPHPページ

Question

自分のページメニューのonMouseOverイベントを使用しようとしていたカスタムPHPワードプレスのテーマがありますが、動作しません。私はPHPで経験はありませんが、私はいくつかの努力でそれを並べ替えることができます..これを動作させる別の方法はありますか？

の.php

<ul class="external-nav"> 
    <li> 
    <a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/assets/img/music-icon.png" onMouseOver="this.src='<?php bloginfo('stylesheet_directory');?>/assets/img/music-icon.png';" onMouseOut="this.src='<?php bloginfo('stylesheet_directory');?>/assets/img/music-icon.png';" alt="" /></a> 
    </li> 
    <li> TWO...</li> 
    <li>..three...</li> 
    etc... 
</ul> 

CSSやPHPでこれを行う方法はありますか？私が見たすべての例は、複数の画像では簡単に見えません。これには5つのメニューオプションがあります。

ありがとうございます！

Answer 1

cssでproperty hoverを使用できます。 javascript in script tagを使用できますが、インラインでは使用できません。 持ちたいものを提示するためのデモをいくつか作成してください。あなたは、元の画像を配置する必要がある場合は、マウスアウトイベントを処理するjQueryの

$('ul.external-nav li a').hover(function(){ 
    $(this).children('img').attr('src','<the_location_of_other_img_here>'); 
}); 

でそれを行うことができます

Answer 2

$('ul.external-nav li a').mouseout(function(){ 
    $(this).children('img').attr('src','<the_original_image_here>'); 
}); 

・ホープこのことができます！