Question

我有一个自定义的php wordpress主题，我试图使用onMouseOver事件为我的页面菜单，但它无法正常工作。我不是那种经验丰富的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中使用属性悬停。或者你有必要使用javascript in script tag，但不能内联。请创建一些演示，以展示您想要的内容。

Answer 2

你可以在JQuery中做到这一点

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

如果您需要放回原始图像，请处理mouseout事件

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

希望这有帮助！

在UL内的php页面上的onMouseOver图像交换

2 个答案: