Foros del Web » Creando para Internet » CSS »

Problema con hover

Estas en el tema de Problema con hover en el foro de CSS en Foros del Web. Hola, tengo el siguiente problema: tengo un div con un border bottom negro y dentro de este unos botones. Quiero que, al poner el mouse ...
  #1 (permalink)  
Antiguo 01/08/2011, 22:10
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 7 años, 5 meses
Puntos: 8
Problema con hover

Hola,

tengo el siguiente problema: tengo un div con un border bottom negro y dentro de este unos botones.
Quiero que, al poner el mouse sobre estos botones, el color del borde del div principal cambie. Para esto hice el siguiente código:

Código HTML:
Ver original
  1. <div id="header">
  2.     <img src="images/logo_header.png" />
  3.     <div class="header_button">Inicio</div>
  4. </div>

Código CSS:
Ver original
  1. #header {
  2.     position: absolute;
  3.     width: 100%;
  4.     background: url(images/header_bg.jpg);
  5.     background-repeat: repeat-x;
  6.     border-bottom: 2px solid #000;
  7.     height: 75px;
  8. }
  9. .header_button {
  10.     position: relative;
  11.     float: right;
  12.     padding: 0 15px 0 15px;
  13.     font-size: 14px;
  14.     font-weight: bold;
  15.     color: #000;
  16.     line-height: 75px;
  17. }
  18. .header_button:hover {
  19.     color: #fff;
  20.     background: #009ba9;
  21. }
  22. .header_button:hover #header {
  23.     border-bottom: 2px solid #009ba9;
  24. }

Aparentemente todo esta bien pero no funciona. Qué estoy haciendo mal?
  #2 (permalink)  
Antiguo 02/08/2011, 01:16
 
Fecha de Ingreso: agosto-2011
Ubicación: lima
Mensajes: 2
Antigüedad: 5 años, 5 meses
Puntos: 0
Respuesta: Problema con hover

Hola que tal kenproxd.

Eh.. mira el problema que tienes en tu CSS es el siguiente

Código:
    #header {
        position: absolute;
        width: 100%;
        background: url(images/header_bg.jpg);
        background-repeat: repeat-x;
        border-bottom: 2px solid #000;
        height: 75px;
    }
    .header_button {
        position: relative;
        float: right;
        padding: 0 15px 0 15px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        line-height: 75px;
    }
    .header_button:hover {
        color: #fff;
        background: #009ba9;
    }
    .header_button:hover #header {
        border-bottom: 2px solid #009ba9;
    }
Esa linea roja que estoy resaltando, debes agregar lo siguiente:
.header_button:hover, #header:hover

Como ves, lo unico que le faltaba a esa linea era una coma para separar la clase y el id ademas de colocarle a #header el hover para que funcione.

Espero te sirva.
Saludos.
  #3 (permalink)  
Antiguo 02/08/2011, 07:45
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 7 años, 5 meses
Puntos: 8
Respuesta: Problema con hover

Gracias por tu respuesta,

lo que busco hacer es que, al poner el mouse encima de header_button, el div header cambie el color del border bottom a otro. Si lo pongo como me indicas estaría dandole el atributo border-bottom al hover de header_button y al hover de header.

Etiquetas: hover, fondo
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 08:49.