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

将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;
}

Answer 2

您需要捕获鼠标在事件上（例如使用jQuery）并替换图像。

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

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

将鼠标悬停在wordpress上

2 个答案: