2 
#logo
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}

動作しますが、マウスが上にあるときに bg-image が変化しないのはなぜですか?

4

6 に答える 6

4

さて、差し迫った問題は、 の<a>中に要素がないこと#logoです。正しい要素を対象とするように 2 番目のルールを変更すると、この問題が「修正」されます。

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

編集：
コメントで指摘されたように：

最初のルールのスタイルを A 要素に適用し、#logo DIV は何の役にも立たないため削除する必要があります。

これは、混乱を減らし、将来のさらなる頭痛の種を防ぐのに役立つため、実際に問題のより良い修正です. （説明してくれた@Julianに感謝します）

于 2009-09-22T17:23:45.923 に答える
2

background-image はもともと #logo に割り当てられています。ホバーすると、アンカーの背景画像が変更されます。したがって、次のように動作します。

#logo a
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}
于 2009-09-22T17:23:15.993 に答える
1

ホバー画像を<a>要素に適用しました。<a>あなたの中にあなたの要素はありませんdiv#logo。

于 2009-09-22T17:23:56.843 に答える
0

ブロック レベルの要素をアンカー内に配置しないでください。アンカーは、ブロックを表示するように設定できるインライン要素です。div#footer > a > span#logo正しい階層は、対応する css のようなものでなければなりません。

于 2009-09-23T21:36:36.257 に答える
0

アンカー要素を持つように div をスタイルしてから、次を使用できますa:hover。

<div id="blah">
<p> <a href="#"></a></p>
</div>

次に、CSS

#blah a:hover {
 background-image: url(myImage.jpg);
}
于 2009-09-22T17:27:37.157 に答える
0

onMouseOver および onMouseOut JavaScript 関数を使用する方が簡単ではないでしょうか?

<script type="text/javascript">
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; }
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; }
</script>

<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div>

背景色を使用しましたが、画像でも同じように機能するはずです。

于 2011-04-12T01:47:07.540 に答える