стиль ссылок применяется к изображениям?

Question

У меня есть эта действительно неприятная проблема, когда тонкий серебристый цвет, который я применяю как a: hover, a: active появляется вне того места, где он должен. У меня есть изображение в абсолютном позиционировании прямо над меню, которое проявляющий это .... я мог бы просто переместить изображение вверх один, но я хочу, чтобы решить это правильный путь .... вот мой 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 Test Page

<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 на прошлой неделе, поэтому, пожалуйста, будьте добрыми!

Answer 1

Вам нужно будет создать новый стиль для «а» вашего изображения. Если вы этого не сделаете, он будет использовать стандартные стили CSS вашего CSS.

Как это:

a.imglink:hover 
{ 
background:none; 
} 

Answer 2

Я хотел бы добавить стиль, чтобы удалить цвет фона из связанных изображений - таким образом, вы не столкнетесь с вопросами с прозрачной PNGs и т.д.:

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

Answer 3

/* 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; } 

DEMO

Answer 4

Я просто специально целенаправленные ссылки внутри списка цвет фона на парении ..

CSS:

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

http://jsfiddle.net/cSSU7/

ли это решить проблему?