将鼠标悬停在wordpress上

Question

因此，我一直在为悬停时将图片更改为另一图片而苦苦挣扎，但它不会让步。我使用godaddy上托管的WordPress主题，所以我不习惯代码。
下面是代码到位：

<header id="header"> 
    <div id="logo"> 
     <a href="<?php echo home_url(); ?>"> 
      <img src="<?php get_option_tree('rb_logo_path', $theme_options, true); ?>" alt="<?php bloginfo('name'); ?>" /> 
     </a> 
</div> 
<p id="tagline"><?php bloginfo('description'); ?></p> 
</header> 

Answer 1

您需要捕获了事件的鼠标（例如使用jQuery）和替换图像。

$('logo').bind('mouseover', function() { 
     $('img').attr("src","<other image url>"); 
    } 

您需要将此代码添加到您的主题源中。

Answer 2

调整你的HTML这样的：

<header id="header"> 
    <div id="logo"> 
     <a href="<?php echo home_url(); ?>"> 
      <img class="default-image" src="<?php get_option_tree('rb_logo_path', $theme_options, true); ?>" alt="<?php bloginfo('name'); ?>" /> 
      <img class="hover-only" src="%%OTHER IMAGE URL%%" alt="<?php bloginfo('name'); ?>" /> 
     </a> 
</div> 
<p id="tagline"><?php bloginfo('description'); ?></p> 
</header> 

在你style.css

#logo a img.default-image { 
    display: block; 
} 
#logo a img.hover-only { 
    display: none; 
} 
#logo a:hover img.hover-only { 
    display: block; 
} 
#logo a:hover img.default-image { 
    display: none; 
}