0

さて、私がやりたいのは、マウスオーバーでロゴを変更することです。デフォルトのロゴがdefault.PNGの場合、マウスでカーソルを合わせるとnew.PNGに変更します。

私はIEとも互換性のある最良の解決策を探しています。これをCSSの：hoverで動作させるために多くのことを試みましたが、うまくいかなかったので、助けてください。

これは私の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>

ありがとう！

4

1 に答える 1

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がロードされるため、ロードの問題は発生しません。

于 2013-02-18T18:55:09.580 に答える