Question

只要我在同一个css页面上删除悬停文本链接，我的图像精灵就可以正常工作。图像精灵中的悬停和文本链接样式中的悬停似乎是冲突的。如何获取文本链接样式？我是否为文本链接使用单独的css，它是否仍会发生冲突？

HTML

><div id="page-bg"><img src="x" width="100%" height="100%" /></div>  
<div id="container">  
<div id="header1">  
<ul id="navlist1">  
<li id="login"><a href="x"></a></li>  
<li id="getmail"><a href="x"></a></li>  
<li id="quotebtn"><a href="x"></a></li>  
</ul>  
</div>  
</div>

CSS

>body {  color:#333;  font-size: 9px;  }  

#page-bg {  
position:fixed;  
top: 0px;  
left: 0px;  
width: 100%;  
height: 100%;  
}  

#container {  
position: relative;  
background: #C35A26;  
width: 900px;  
font-family: Arial, Helvetica, sans-serif;  
margin-top: 25px;  
margin-left: auto;  
margin-right: auto;  
margin-bottom: auto;  
}  

#header1 {  
width: 900px;  
height: 232px;  
position: relative;  
background-image:url(x)  
}  

#navlist1 {position:relative;}  
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}  
#navlist1 li, #navlist1 a{height:44px;display:block;}  

#login{left:0px;width:94px;}  
#login{background:url('x') 0 0;}  
#login a:hover{background: url('x') 0 -363px;}  

#getmail{left:94px;width:93px;}  
#getmail{background:url('x') -94px 0;}  
#getmail a:hover{background: url('x') -94px -363px;}  

#quotebtn{left:775px;width:125px;}  
#quotebtn{background:url('x') -775px 0;}  
#quotebtn a:hover{background: url('x') -775px -363px;}  

a {  
font-family: Arial, Helvetica, sans-serif;  
font-size:0.75em;  
color: #900;  
}  
a:link {  
text-decoration: none;  
}  
a:visited {  
text-decoration: none;  
color: #900;  
}  
**a:hover {  
text-decoration: underline;  
color: #F00;**  
}  
a:active {  
text-decoration: none;  
color: #F60;

Answer 1

我现在就开始工作了。我所做的就是打开一个空白页面，并在链接和标题等的页面属性中添加css，看看他们如何布置css并重新安排我的css就像Dreamweaver所做的那样。标签是有序的。无论如何，它解决了这个问题。

css图像精灵悬停背景与我的文本悬停冲突

1 个答案: