Question

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

我正在寻找与IE兼容的最佳解决方案。我已经尝试了很多工作：将鼠标悬停在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的插件分析实际的logo元素时，这就是我所得到的：

<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的高度和宽度，假设你已经知道它们（分别替换为。

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

在wordpress上更改鼠标悬停的徽标

1 个答案: