在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

回答

相關問題