在wordpress中更改徽标mouseover

行，所以我想要做的就是让鼠标悬停时更改我的标志。如果默认标志是default.PNG，当您将鼠标悬停在它上面时，我想将其更改为new.PNG！在wordpress中更改徽标mouseover

我正在寻找最好的解决方案，这与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实际的标志元素是什么我得到：

<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>

谢谢！

来源

2013-02-18 Yoshiko Grover

如果您想更改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。

来源

2013-02-18 18:55:09

所以，你的意思是创建这样的事情：

alt="" id="logo-image" class="logo" />

我这样做，但没有奏效。 – 2013-02-18 19:27:28

反正我用JavaScript修复它！感谢您的协助！ – 2013-02-18 19:50:58

这是奥古斯丁最理想的情况。不需要运行脚本来实现可以通过CSS实现的简单功能。我给你一个upvote。 :) – 2013-04-05 16:51:04

在wordpress中更改徽标mouseover

回答

相关问题