0

我遇到了这个非常令人沮丧的问题，我应用为 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 测试页 

<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

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

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

于 2013-08-12T15:53:36.750 回答
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

我只是专门针对悬停时的背景颜色列表中的链接..

CSS：

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

http://jsfiddle.net/cSSU7/

这解决了你的问题吗？

于 2013-08-12T15:55:04.427 回答