Problema con a:hover en ul y li

kiM- · #1 (**permalink**) 21/03/2011, 19:41

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

Naahuel · #2 (**permalink**) 21/03/2011, 21:05

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 originalbody {
    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;
    list-style-type: none;
    margin-right: 5px;
    margin-top: 137px;
}
#cont_buttons ul li a{
    padding-left: 10px;
    -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:red;
}
#cont_buttons a:hover {
    background:yellow;
}

¿Se entiende a lo que me refiero?

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