0

皆さん、こんにちは。ホバー時に画像を変更したいのですが、コードが機能しません。

これまでのコード

<!DOCTYPE html>
<html>
<style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
    }

a.rollover span.displace img:hover {
    background: url("images/red.png");
    display: block;
    }


</style>
<body>
<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png"/></a>


</body>
</html>

どんな助けでも大歓迎です...

4

2 に答える 2

0

以下のコードが機能するはずです。CSS：

<style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
     background: url("images/blue.png");
}

a.rollover span.displace:hover {
    background: url("images/red.png");        
}
</style>

そしてHTML：

<a href="#" class="rollover" title="Webvamp"><span class="displace"></span></a>

別の画像を表示する画像の背景を配置しようとしているため、基本的に、srcで指定された画像の下に背景が非表示になります。

あなたがimgを持ちたいなら-あなたはこの答えからの解決策を使うことができます：

<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" onmouseover="this.src='images/red.png';" onmouseout="this.src='images/blue.png';"/></span></a>

別のオプションは次のとおりです。

<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" class="initial" /><img src="images/red.png" class="hover"/> </span></a>

そしてCSS：

img.hover{display:none;}

a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;        
}

a.rollover span.displace:hover img.hover{
    display:block;      
}

a.rollover span.displace:hover img.initial{
    display:none;      
}
于 2012-12-26T13:08:04.873 に答える
0

あなたの論理はやや明確ではありません。あなたがしようとしているのは、背景画像を設定しようとしていることです。画像の場合、画像は要素の背景画像と重なるため、設定されますが表示されません。

このコードを試してください：

<!DOCTYPE html>

<html>

<style>

a.rollover span.displace div.image, a.rollover span.displace  {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
    }

a.rollover span.displace div.image {
    background: url("images/blue.png");
}

a.rollover span.displace div.image:hover {
    background: url("images/red.png");
    }

</style>

<body>

<a href="#" class="rollover" title="Webvamp">

    <span class="displace">

        <div class="image"></div>

    </span>

</a>

</body>

</html>

このコードでは、私が行ったことはdiv、その背景画像を取得して設定したことです。誰かがその上にカーソルを合わせるとdiv、CSSはのdiv背景画像を変更し、ユーザーがカーソルをから外すと元に戻しますdiv。

于 2012-12-26T13:09:33.980 に答える