Foros del Web » Creando para Internet » CSS »

Problema con Hover en lista

Estas en el tema de Problema con Hover en lista en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/11/2010, 19:00
 
Fecha de Ingreso: diciembre-2004
Mensajes: 354
Antigüedad: 13 años
Puntos: 0
Problema con Hover en lista

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> 
__________________
Pedro Pablo Vivanco D.
Webmaster todoalbo.cl
[email protected]
http://www.todoalbo.cl
"Dios creo el Cielo, Colo-Colo le puso todas sus Estrellas"
  #2 (permalink)  
Antiguo 01/11/2010, 19:43
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Problema con Hover en lista

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!
  #3 (permalink)  
Antiguo 01/11/2010, 19:47
 
Fecha de Ingreso: diciembre-2004
Mensajes: 354
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con Hover en lista

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.
__________________
Pedro Pablo Vivanco D.
Webmaster todoalbo.cl
[email protected]
http://www.todoalbo.cl
"Dios creo el Cielo, Colo-Colo le puso todas sus Estrellas"
  #4 (permalink)  
Antiguo 01/11/2010, 19:50
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Problema con Hover en lista

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!
  #5 (permalink)  
Antiguo 01/11/2010, 19:52
 
Fecha de Ingreso: diciembre-2004
Mensajes: 354
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con Hover en lista

Sip, muchísimas gracias! Ahí lo tengo funcionando a la perfección!!
__________________
Pedro Pablo Vivanco D.
Webmaster todoalbo.cl
[email protected]
http://www.todoalbo.cl
"Dios creo el Cielo, Colo-Colo le puso todas sus Estrellas"

Etiquetas: hover, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:33.