css изображение спрайт наведения фона конфликтует с моим текстовым наведением - PullRequest
Новая
       9

css изображение спрайт наведения фона конфликтует с моим текстовым наведением

1 голос
/ 03 мая 2011

Мой спрайт изображений работает нормально, пока я удаляю свои текстовые ссылки при наведении на той же странице 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;

1 Ответ

0 голосов
/ 30 августа 2012

Я получил его на работу сейчас.Все, что я сделал, это открыл пустую страницу и добавил CSS в свойства страницы для ссылок, заголовков и т. Д., Чтобы увидеть, как они выложили CSS и переставили мой CSS так, чтобы он был похож на тот, который делает Dreamweaver до того места, гдетеги в порядке.Во всяком случае, это решило проблему.

...