Question

我遇到了这个非常令人沮丧的问题，其中我正在应用的颜色为银色：悬停，a：主动出现在它应该的位置之外。我有一个绝对定位的图像正好在展示这个菜单的上方....我可以将图像向上移动一个但我想以正确的方式解决它....这是我的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所以请善待！

Answer 1

我会添加一种样式来删除链接图像中的背景颜色 - 这样你就不会遇到透明PNG等问题：

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

Answer 2

您需要为图片的“a”创建新样式。如果不这样做，它将使用CSS的标准“a”样式。

像这样：

a.imglink:hover 
{
background:none;
}

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/

这是否解决了您的问题？

链接样式适用于图像？

4 个答案: