0

a:hover,a:active として適用している色の薄いシルバーが本来あるべき場所の外に表示されるという、本当にイライラする問題があります。これを示しているメニューの真上に絶対位置に画像があります....画像を1つ上に移動することもできますが、正しい方法で解決したい....ここに私のCSSがあります

.logo
{
width:200px;
height:108px;
position:absolute;
left:5px;
top:10px;
}

#menu
{
position:relative;
top:110px;
padding-top:0px;
clear:both;
}

ul
{
list-style-type:none;
overflow:hidden;
padding:0px;
width:900px;
}

a
{
text-decoration:none;
}

li
{
float:left;
}

a:link,a:visited
{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:120px;
height:auto;
color:#000000;
float:left;
}

a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}

対応する html は次のとおりです。申し訳ありませんが、お使いのブラウザーは JavaScript をサポートしていません! U4Uテストページ 

<div class="header">
<a href="/" class="imglink"><img class="logo" src="linktofilehere" alt="U4U Logo" /></a>
</div>

<div id="menu">
<ul>
<li><a href="/" >Home</a></li>
<li><a href="/About_Us.html">About Us</a></li>
<li><a href="/Initiatives.html">Programs</a></li>
<li><a href="/involvement.html">US Movement</a></li>
<li><a href="/Sponsorship.html">Sponsorship</a></li>
<li><a href="/donate.html">Donate</a></li>
</ul>
</div>

</body>
</html>

私はヘルプ知識を検索しましたが、実際に関連するものは何も見つかりませんでした....それは単純なものだと確信しています....どんな助けもありがたいです、私はそれがポジショニングまたは定義されていないことに関係しているかもしれないと思いますホバー エリアは正しく表示されますが、よくわかりません....私は先週 html と css を学習し始めたばかりなので、親切にしてください!

4

4 に答える 4

0

画像の「a」の新しいスタイルを作成する必要があります。そうしないと、CSS の標準の 'a' スタイルが使用されます。

このような ：

a.imglink:hover 
{
background:none;
}
于 2013-08-12T15:54:37.537 に答える
0 
/* remove the background */
.imglink:hover { background: none; }

/* if you run into specificity issues, be more selective! :) */
a.imglink:hover { background: none; }

/* or remove the padding from just the first a */
a:first-of-type{ padding: 0; }

/* or remove the background from the first link */
a:first-of-type{ background: none; }

デモ

于 2013-08-12T15:54:38.610 に答える
0

リンクされた画像から背景色を削除するスタイルを追加します-そうすれば、透明なPNGなどの問題に遭遇することはありません:

.imglink:hover { background-color:transparent; }

于 2013-08-12T15:53:36.750 に答える
0

ホバー時の背景色のリスト内のリンクを具体的にターゲットにしました..

CSS:

#menu > ul > li > a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}

http://jsfiddle.net/cSSU7/

これで問題は解決しましたか?

于 2013-08-12T15:55:04.427 に答える