web-dev-qa-db-ja.com

CSSで画像をホバーさせる方法は？

ホバー時に画像を通常から明るい画像に変更したい、私のコード：

    <div class="nkhome">
        <a href="Home.html"><img src="Images/btnhome.png" /></a>
    </div>
.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
    width:59px;
    height:59px;
}
.nkhome a img:hover {
    background:url(Images/btnhomeh.png);
    position:absolute;
    top:0px;
}

ホバーが機能しないのはなぜですか？マウスがその上にあるとき、ホバー画像ではなく最初の画像が表示されます。

cssimagehover
10
greenthunder

aタグを含むimgタグがあります。それが通常の状態です。次に、ホバー状態としてbackground-imageを追加すると、aタグの背景-imgタグの後ろに表示されます。

おそらくCSSスプライトを作成し、背景の位置を使用する必要がありますが、これにより開始できます。

<div>
    <a href="home.html"></a>
</div>

div a {
    width:  59px;
    height: 59px;
    display: block;
    background-image: url('images/btnhome.png');
}

div a:hover {
    background-image: url('images/btnhomeh.png);
}

これ 2004年のList Apart Article はまだ関連性があり、スプライトについての背景と、2つの異なる画像の代わりにスプライトを使用するのが良い理由を説明します。それは私があなたに説明することができる何よりもずっとよく書かれています。

19
djlumley

画像の背景を別の画像に設定しています。これで問題ありませんが、フォアグラウンド（IMGのSRC属性）が他のすべてをオーバーレイします。

.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
}
.nkhome a {
    background:url(Images/btnhome.png);
    display:block; /* Necessary, since A is not a block element */
    width:59px;
    height:59px;
}
.nkhome a:hover {
    background:url(Images/btnhomeh.png);
}


<div class="nkhome">
    <a href="Home.html"></a>
</div>
7
John Green

単にこれ、余分なdivやJavaScriptは必要ありません、純粋なCSS（ jsfiddle demo ）：

[〜＃〜] html [〜＃〜]

<a href="javascript:alert('Hello!')" class="changesImgOnHover">
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>

[〜＃〜] css [〜＃〜]

.changesImgOnHover {
    display: inline-block; /* or just block */
    width: 50px;
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
    visibility: hidden;
}
7
scrypter

これはこのようには機能せず、両方の画像を背景画像として配置します。

.bg-img {
    background:url(images/yourImg.jpg) no-repeat 0 0;
}

.bg-img:hover {
    background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
2
Pal Singh

こんにちは、親の位置を相対的、子を絶対にし、このように絶対クラスに高さまたは幅を与える必要があります

Css

  .nkhome{
    margin-left:260px;
    width:59px;
    height:59px;
    margin-top:170px;
    position:relative;
    z-index:0;
}
.nkhome a:hover img{
    opacity:0.0;
}
.nkhome a:hover{
  background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    z-index:1;

}

[〜＃〜] html [〜＃〜]

 <div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a>
    </div>
​

ライブデモ http://jsfiddle.net/t5FEX/7/

またはこれ

<div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
            onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
            /></a>
    </div>​

ライブデモ http://jsfiddle.net/t5FEX/9/

1
Rohit Azad

以下に簡単な手順を紹介し、ホバーチュートリアルで素晴らしい例を紹介します。

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

0
dzoni

問題の正確な解決策

content：url（ "YOUR-IMAGE-PATH"）;を使用して、ホバーの画像を変更できます。

画像ホバーの場合、CSSで以下の行を使用します。

img:hover

img：hover内の以下の設定を使用してホバーの画像を変更するには：

img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
0
Ashish Kwatra