3

ホバーしたときに背景画像も表示するボタンがあります。（ボタンの説明の矢印です）。似たような質問がかなりありますが、私のために答えを微調整することはできませんでした。

HTMLは次のようになります

<div id="header_feedback">
    <a href="#contactForm">
        <img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
    </a>
</div>

そのときの CSS は

#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}

#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}

どんなアイデアでも大歓迎です！

4

3 に答える 3

1

ここでの主な問題はCSSではありません。Itagiの回答urlは、とparens/addressの間にスペースを入れることができないという小さな問題を正しく特定しました。

しかし、他に2つの大きな問題があります。

  1. 無効な画像のURL：適用background: url('./img/addevent_tip.png');すると、有効な画像を見つけることができません。これを修正するには、2つのピリオドまたはゼロが必要です。だからどちらかbackground: url('/img/addevent_tip.png');またはbackground: url('../img/addevent_tip.png');
  2. 不透明な画像に適用された背景は表示されません：divのコンテンツ全体が画像であり、その画像には透明度がないため、正しく行われた場合でもホバー上の変化を確認することはできません。これを調整するには、画像の一部を透明にするか（おそらく、ホバーしない状態の背景を設定して、通常のように見えるようにします）、またはCSSスプライスを優先して画像を破棄します。
于 2012-05-17T14:12:54.350 に答える
0 
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
于 2012-05-17T13:48:41.347 に答える
0

次のように変更する必要があります。

#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}

'url'と実際のURLの間に空白はありません

于 2012-05-17T13:46:56.230 に答える