html - html-css change img hover

Question

画像のホバーを別の画像に変更しようとしています。私が見つけたものはまだ私のために働いていません。これが私のHTMLです

<div id="navbar">
    <table style="margin-left: auto; margin-right: auto;">
        <tr>
            <td><a href="index.html"><div id="navbar_button" style="background-image: url(images/navbar_home.png); width: 213px;"></div></a></td>
            <td><a href="play.html"><div id="navbar_button" style="background-image: url(images/navbar_playnow.png); width: 213px;"></div></a></td>
            <td><a href="home/index.php"><div id="navbar_button" style="background-image: url(images/navbar_forum.png); width: 213px;"></div></a></td>
            <td><a href="highscores.php"><div id="navbar_button" style="background-image: url(images/navbar_highscores.png); width: 213px;"></div></a></td>
        </tr>
    </table>
</div>

と私のCSS

#navbar {
    background-image: url(../images/navbar_bg.png);
    height: 88px;
    width: 100%;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
}
#navbar_button {
    height: 88px;
}
#navbar_button:hover {
    opacity:0.9;
    filter:alpha(opacity=90);
}

score 2 · Accepted Answer

複数の要素に同じIDを使用しないでください。IDは一意の識別子であり、一意である必要があります。これが問題です。

したがって、IDではなくクラスに変更する必要があります。

.navbar_button {
    height: 88px; 
    width: 213px;
} 
.navbar_button:hover { 
    opacity:0.9; 
    filter:alpha(opacity=90); 
}

<div id="navbar"> 
    <table style="margin-left: auto; margin-right: auto;"> 
        <tr> 
            <td><a href="index.html"><div class="navbar_button" style="background-image: url(images/navbar_home.png);"></div></a></td> 
            <td><a href="play.html"><div class="navbar_button" style="background-image: url(images/navbar_playnow.png);"></div></a></td> 
            <td><a href="home/index.php"><div class="navbar_button" style="background-image: url(images/navbar_forum.png);"></div></a></td> 
            <td><a href="highscores.php"><div class="navbar_button" style="background-image: url(images/navbar_highscores.png);"></div></a></td> 
        </tr> 
    </table> 
</div>

ただし、これではホバー時に画像を変更できません。画像を変更するには、IDを使用し、すべてのdivに別の画像+IDを指定する必要があります。

.navbar_button {
    height: 88px; 
} 
#navbar_button1:hover { 
    background-image: url(whatever1.png);
}
#navbar_button2:hover { 
    background-image: url(whatever2.png);
}

<div id="navbar"> 
    <table style="margin-left: auto; margin-right: auto;"> 
        <tr> 
            <td><a href="index.html"><div class="navbar_button" id="navbar_button1" style="background-image: url(images/navbar_home.png); width: 213px;"></div></a></td> 
            <td><a href="play.html"><div class="navbar_button" id="navbar_button2" style="background-image: url(images/navbar_playnow.png); width: 213px;"></div></a></td> 
        </tr> 
    </table> 
</div>

別のトリック：クラスでソリューション1を使用し、通常の状態とホバー状態（並べて表示）が設定された1つの画像を使用します（通常の状態を左に、ホバー画像を右に）。あなたのCSSを書くよりも：

.navbar_button {
    background-repeat: no-repeat;
    background-position:right;
    height: 88px; 
    width: 213px;
} 
.navbar_button:hover {
    background-position:left;
    opacity:0.9; 
    filter:alpha(opacity=90); 
}

画像上の画像は、コンテナの高さと幅と一致している必要があります。一致していないと、見栄えが悪くなります。
画像の負荷が大きいため、ファイルサイズが大きくなります
ただし、ホバー時に画像を読み込む必要はなく、低速のサーバー/ブラウザ/帯域幅でもちらつきはありません。
これにより、CSS内のすべての画像にIDを書き込む必要がなくなります。

score 0 · Accepted Answer

うまくいきました。ここで見つけることができます。

画像のURLを確認してください。意図的に0.9アルファに設定しましたか？

score 0 · Accepted Answer

このようにコードを変更します

<td><div class="navbar_button" style="background-image: url(images/navbar_home.png); width: 213px;"><a href="index.html"></a></div></td>

そしてcssで：このように変更し、

div.navbar_button a:hover {
opacity:0.9;
filter:alpha(opacity=90);
}

Idはユニークなものです..繰り返すことはできません..だから私はidの代わりにクラスを使用しました..これを試してください..これが役立つことを願っています。

score 0 · Accepted Answer

ID は一意の識別子です。別のIDを使用する必要がありますIDを変更して、これを試してください：

.image-hover {
   display:block; /* if u need */
   background-image:url(http://first_image_url.jpg);
   width:100px; /* as your wish */
   height:100px; /* as your wish */
}
.image-hover:hover {
   background-image:url(http://second_image_url.jpg);
}

またはjavascriptmouseoverを使用してmouseout

html - html-css change img hover

4 に答える 4

Related

Reference