在wordpress中更改鼠标悬停徽标

Question

好的， 所以我想做的是在鼠标悬停时更改我的徽标。 如果默认徽标是 default.PNG，当您将鼠标悬停在它上面时，我想将其更改为 new.PNG！

我正在寻找最好的解决方案，它也与 IE 兼容。我已经尝试了很多方法来使它与 :hover in CSS 一起工作，但无法做到，所以请协助。

这就是我的 header.php 文件的样子：

<!--Logo-->
        <div class="grid_3_no_margin"> 
            <a href="<?php echo site_url() ?>">
                <?php if(!empty($al_options['al_logo'])):?>
                    <img src="<?php echo $al_options['al_logo']?>" alt="<?php echo $al_options['al_logotext']?>" id="logo-image" class="logo" />
                <?php else:?>
                    <?php echo isset($al_options['al_logotext']) ? $al_options['al_logotext'] : 'Balance' ?>
                <?php endif?>
            </a>
        </div>
        <!--End Logo-->

这就是我使用 Firefox 插件分析实际徽标元素时得到的结果：

<div class="grid_3_no_margin"> 
    <a href="http://myurl.com">
      <img src="http://myurl.com/icons/logo.PNG" alt="Logo" id="logo-image" class="logo">
    </a>
</div>

谢谢！

Answer 1

如果要更改img或img源，则需要使用javascript。

您可以通过使用 background-image 属性在 css 中实现相同的结果：

.img-div {
    background-image: url('logo.png');
    height : <logo-height>
    width : <logo-width>
}

.img-div:hover {
    background-image: url('logo2.png');
}

而不是<img />，设置<div class="img-div"></div>

但您可能必须为 div 设置高度和宽度，假设您已经知道它们（分别替换 in 和 。

• 这是跨浏览器，没问题。

• 这比在 JS 中做的轻，而且你没有加载问题，因为解析 CSS 时无论如何都会加载 logo2.png。