2

ホバー時に画像を効果的に交換する非常に単純なコードがあります。メインの画像は灰色、:hover画像は緑色です。:hoverホバー時に緑色の画像が表示されるのがわかりますが、メインの灰色の画像の後ろにあります。グレーが表示されないようにするにはどうすればよい:hoverですか?

html

<div id="header">
    <a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>

CSS

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 960px;
}

#header .logo {
    display: block;
    float: left;
    width: 185px;
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}
4

3 に答える 3

1

変更された CSS:

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 960px;
}

#header .logo {
    display: block;
    float: left;
    width: 185px;
    height: 40px; /*added*/
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}

/*added*/
#header .logo img {
    display: block;
}

#header .logo:hover img {
    display: none;
}
于 2013-06-10T19:18:16.830 に答える
0

これは、クラスがめちゃくちゃになっているためです。これは、テキストに何もないボタンの例ですが、ソースは css から設定されています // また、css からホバー効果も与えます:

.SubmitClass
{
    background-image: url('../Images/Submit.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    width: 100px;
    height: 30px;
    cursor: pointer;
    cursor: hand;
}

.SubmitClass:hover
{
    background-image: url('../Images/SubmitHover.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    width: 100px;
    height: 30px;
    cursor: pointer;
    cursor: hand;
}
于 2013-06-10T19:12:11.647 に答える