Foros del Web » Creando para Internet » CSS »

Problema con a:hover en ul y li

Estas en el tema de Problema con a:hover en ul y li en el foro de CSS en Foros del Web. Pués bueno, resulta que yo hacía botones usando divs, a cada div le daba redondeado, estilo de letra, fondo, etc... y ponía a dicho div ...
  #1 (permalink)  
Antiguo 21/03/2011, 20:41
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Problema con a:hover en ul y li

Pués bueno, resulta que yo hacía botones usando divs, a cada div le daba redondeado, estilo de letra, fondo, etc... y ponía a dicho div un hipervínculo, en a:hover ponía otra imagen para que se sustituyera. En listas es diferente, no puedo poner un a:hover porque no me sale del todo al pasar el ratón por encima..

HTML:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<div id="cont_global">
<div id="header">
<div id="cont_buttons">Colocar aquí el contenido para id "cont_buttons"
<div id="buttons">
<ul>
<li><a href="#">Contacto</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Información</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Noticias</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Cita:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#cont_global {
width: 1007px;
}
#header {
background-image: url(images/logo.png);
height: 196px;
width: 1007px;
}
#cont_buttons {
height: 196px;
width: 1007px;
overflow: hidden;
}
#cont_buttons ul li {
float: right;
padding-left: 10px;
list-style-type: none;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 14px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
font-weight: bold;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
background-image: url(images/button_nav_a.png);
margin-right: 5px;
margin-top: 137px;
}
#cont_buttons a:hover {
background-image: url(images/button_nav_hover.png);
}
Cómo podeis comprobar tengo el cont_buttons a:hover con una imagen de fondo, la cuál quiero que ocupe el botón entero de las lists, pero no puedo, he probado a poner en cont_buttons ul li a añadirle una a "cont_buttons ul li a" pero nada se me desordena y no funciona. Lo único que quiero es que al pasar el ratón por encima del botón (con hipervínculo incluido) se cambie totalmente la imagen como ocurre con los divs.

Saludos y gracias, espero haberme explicado bien
  #2 (permalink)  
Antiguo 21/03/2011, 22:05
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Problema con a:hover en ul y li

Bueno pues la respuesta es simple. A la hora de estilizar <a>'s dentro de otro elemento, por razones de usabilidad y para evitar este tipo de problemas siempre se debe preferir estilizar el anchor (<a>) y no su contenedor. En tu caso, los estilos de fondo, paddings y todo eso debes dárselo al anchor. Te muestro como:
Código CSS:
Ver original
  1. body {
  2.     margin-left: 0px;
  3.     margin-top: 0px;
  4.     margin-right: 0px;
  5.     margin-bottom: 0px;
  6. }
  7.  
  8. #cont_global {
  9.     width: 1007px;
  10. }
  11. #header {
  12.     background-image: url(images/logo.png);
  13.     height: 196px;
  14.     width: 1007px;
  15. }
  16. #cont_buttons {
  17.     height: 196px;
  18.     width: 1007px;
  19.     overflow: hidden;
  20. }
  21. #cont_buttons ul li {
  22.     float: right;
  23.     list-style-type: none;
  24.     margin-right: 5px;
  25.     margin-top: 137px;
  26. }
  27. #cont_buttons ul li a{
  28.     padding-left: 10px;
  29.     -webkit-border-top-left-radius: 10px;
  30.     -webkit-border-top-right-radius: 10px;
  31.     -moz-border-radius-topleft: 10px;
  32.     -moz-border-radius-topright: 10px;
  33.     border-top-left-radius: 10px;
  34.     border-top-right-radius: 10px;
  35.     font-size: 14px;
  36.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  37.     color: #FFF;
  38.     font-weight: bold;
  39.     padding-top: 3px;
  40.     padding-right: 7px;
  41.     padding-bottom: 3px;
  42.     background:red;
  43. }
  44. #cont_buttons a:hover {
  45.     background:yellow;
  46. }

¿Se entiende a lo que me refiero?

Ahí vas a ver que el fondo se aplica correctamente.

Etiquetas: Ninguno
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 22:49.