1

リンクがホバーされたときにリンクが変更されるように、背景画像を取得しようとしています。基本的に、ホバー画像は別の色なので、画像の色を変更しようとしています (これは私が知っている方法では不可能なので、画像を交換するだけです)。

ロゴを表示するコード:

<a href="/" id="logo"></a>

そしてCSS：

#logo {
position: absolute;
display: block;
margin-top: 10px;
margin-left: 10px;
background: url('../img/logo.png') no-repeat;
width: 60px;
height: 60px;
}

#logo a:hover {
background: url('../img/logo-blue.png') no-repeat;
}

このホバーを容易にするロゴを表示するためのより良い方法はありますか?

編集 (ヘッダー CSS を追加):

#header {
height: 75px;
text-align: right;
position: relative;
}

#header h2 {
font-size: 2.5em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: 15px;
}
4

1 に答える 1

0

あなたの要素は要素であるため、からに変更#logo a:hoverします。#logo:hover<a>#logo

また、その他のヒント:

  • CSS をインデントして、プロパティをセレクターや他のルールセットと区別しやすくします。
  • CSS 参照の画像やその他のアセットをスタイルシートと同じディレクトリに保持します。これにより、相対 URI が不要になり、すべてがまとめられます。
  • なぜプロパティposition: absolute;なしで使用しているのですか？top/right/bottom/leftどのような効果を達成しようとしていますか?
于 2012-12-12T02:19:17.150 に答える