10

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

    <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;
}

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

4

8 に答える 8

19

aタグを含むタグがありますimg。それがあなたの正常な状態です。background-image次に、ホバー状態としてa を追加すると、タグの背景 (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 年のこのA List Apart Articleは今でも関連性があり、スプライトの背景と、2 つの異なる画像の代わりにスプライトを使用することをお勧めする理由を説明します。私があなたに説明できるものよりもずっとよく書かれています。

于 2012-04-18T04:17:05.687 に答える
7

単純にこれで、追加のdivやJavaScriptは必要なく、純粋なCSS（jsfiddleデモ）だけです。

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;
}
于 2012-10-04T10:07:03.757 に答える
7

画像の背景を別の画像に設定しています。これは問題ありませんが、フォアグラウンド (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>
于 2012-04-18T04:18:44.640 に答える
2

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

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

.bg-img:hover {
    background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
于 2012-04-18T04:16:16.100 に答える
1

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

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/

于 2012-04-18T04:15:20.480 に答える
0

ここでは、いくつかの簡単な手順と、「遊んで」ライブでテストできる例であるホバー チュートリアルを紹介します。

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

于 2013-09-04T18:47:38.063 に答える
0

あなたの問題に対する正確な解決策

content:url("YOUR-IMAGE-PATH") ;を使用してホバー時に画像を変更できます。

画像をホバーするには、css の次の行を使用します。

img:hover

img:hover 内の以下の構成を使用して、ホバー時に画像を変更します。

img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
于 2017-06-12T08:43:58.423 に答える
-1

これでクラスを作ります。そして、自己の幅と高さで 2 つの異なる画像を作成します。ie9で動作します。

このリンクを参照してください。

http://kyleschaeffer.com/development/pure-css-image-hover/

また、2 つの異なる画像を作成して、別の画像をホバーして自己クラス名に配置することもできます。

例を参照してください。

 .myButtonLink {
              margin-top: -5px;

    display: block;
    width: 45px;
    height: 39px;
    background: url('images/home1.png') bottom;
    text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -5px;

              border-radius: 3px;
              -webkit-border-radius: 3px;           
}

.myButtonLink:hover {
    margin-top:  -5px;

    display: block;
    width: 45px;
    height: 39px;
              background: url('images/home2.png') bottom;
              text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -20x;

              border-radius: 3px;
              -webkit-border-radius: 3px;
}
于 2015-06-27T19:39:47.393 に答える