Problema con Hover en lista

todoalbo · #1 (**permalink**) 01/11/2010, 18:00

Estimados:

Tengo el siguiente código, y quiero que cada elemento de la lista tenga un color de fondo distinto al hacerle el "hover". Con el siguiente codigo solo en el dos, tres y cuatro se me pone el color de fondo pero SOLO en el texto y no en todo el bloque. ¿Qué hago?

El codigo es:

Código HTML:

<html>
<head>

<title>Zila - Poleras y Polerones</title>
<style>
* {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:active, a:visited {color: #036; text-decoration:none}
a:hover {text-decoration:underline}
#menu {float:right; width:200px}
#contenedor {margin:0 auto; margin-top:50px; width:600px; text-align:center}
ul {list-style:none; text-transform: uppercase capitalize; font-weight:bold;}
li {height: 70px; line-height: 70px; padding-left:10px; display:block; text-align:left; border-top: dotted 1px #ddd}
li.uno {border-left: solid 5px #039}
li.uno a:hover {background-color:*#039}
li.dos { border-left: solid 5px #900}
li.dos a:hover {background-color:#900} 
li.tres {  border-left: solid 5px #FC0}
li.tres a:hover {background-color: #FC0}
li.cuatro { border-left: solid 5px #360}
li.cuatro a:hover {background-color: #360;}
</style>
</head>

<body>
<div id="contenedor"> <img src="logo.jpg" width="400" height="266" style="float:left;" />
<div id="menu">
<ul>
<li class="uno"><a href="#">Nosotros</a></li>
<li class="dos"><a href="#">Polerones</a></li>
<li class="tres"><a href="#">Poleras</a></li>
<li class="cuatro"><a href="#">Contacto</a></li>
</ul>
</div>

</div>
</body>
</html>

PrendekZ · #2 (**permalink**) 01/11/2010, 18:43

Aver..

En el uno hay un error si te fijas bien:

Cita:

li.uno a:hover {background-color:*#039}

Hay un asterisco que no se porque lo colocaste, y aquí te lo arreglo:

Cita:

li.uno a:hover {background-color:#039;}

--------------------

Aquí te dejo el código y ami me funciona bien:

Cita:

<html>
<head>

<title>Zila - Poleras y Polerones</title>
<style>
* {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:active, a:visited {color: #036; text-decoration:none}
a:hover {text-decoration:underline}
#menu {float:right; width:200px}
#contenedor {margin:0 auto; margin-top:50px; width:600px; text-align:center}
ul {list-style:none; text-transform: uppercase capitalize; font-weight:bold;}
li {height: 70px; line-height: 70px; padding-left:10px; display:block; text-align:left;

border-top: dotted 1px #ddd}
li.uno {border-left: solid 5px #039;}
li.uno a:hover {background-color:#039;}
li.dos { border-left: solid 5px #900;}
li.dos a:hover {background-color:#900;}
li.tres { border-left: solid 5px #FC0;}
li.tres a:hover {background-color:#FC0;}
li.cuatro { border-left: solid 5px #360;}
li.cuatro a:hover {background-color:#360;}
</style>
</head>

<body>
<div id="contenedor"> <img src="logo.jpg" width="400" height="266" style="float:left;" />
<div id="menu">
<ul>
<li class="uno"><a href="#">Nosotros</a></li>
<li class="dos"><a href="#">Polerones</a></li>
<li class="tres"><a href="#">Poleras</a></li>
<li class="cuatro"><a href="#">Contacto</a></li>
</ul>
</div>

</div>
</body>
</html>

¿También quieres que aparesca en todo el bloque el fondo del Color?

Aquí tienes el código:

Cita:

<html>
<head>

<title>Zila - Poleras y Polerones</title>
<style>
* {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:active, a:visited {color: #036; text-decoration:none}
a:hover {text-decoration:underline}
#menu {float:right; width:200px}
#contenedor {margin:0 auto; margin-top:50px; width:600px; text-align:center}
ul {list-style:none; text-transform: uppercase capitalize; font-weight:bold;}
li {height: 70px; line-height: 70px; padding-left:10px; display:block; text-align:left;

border-top: dotted 1px #ddd}
li.uno {border-left: solid 5px #039;}
li.uno:hover {background-color:#039;}
li.dos { border-left: solid 5px #900;}
li.dos:hover {background-color:#900;}
li.tres { border-left: solid 5px #FC0;}
li.tres:hover {background-color:#FC0;}
li.cuatro { border-left: solid 5px #360;}
li.cuatro:hover {background-color:#360;}
</style>
</head>

<body>
<div id="contenedor"> <img src="logo.jpg" width="400" height="266" style="float:left;" />
<div id="menu">
<ul>
<li class="uno"><a href="#">Nosotros</a></li>
<li class="dos"><a href="#">Polerones</a></li>
<li class="tres"><a href="#">Poleras</a></li>
<li class="cuatro"><a href="#">Contacto</a></li>
</ul>
</div>

</div>
</body>
</html>

Prueba y me avisas..

Saludos!

todoalbo · #3 (**permalink**) 01/11/2010, 18:47

Gracias!! Te pasaste.

El problema era que había un espacio en blanco, y no se porque el explorador lo reconocía como un caracter, como el asterisco que acá apareció.

Muchas gracias neuvamente, funciona perfecto.

PrendekZ · #4 (**permalink**) 01/11/2010, 18:50

Puede haber espacios en blanco eso no importa, pero bueno ahi te lo corregí y así lo uso yo sin espacios entre la función CSS y el Valor, recuerda siempre cuando termines cada función cerrarlas ";"

Saludos!

todoalbo · #5 (**permalink**) 01/11/2010, 18:52

Sip, muchísimas gracias! Ahí lo tengo funcionando a la perfección!!