Problema con hover

[kenproxd]

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:

<div id="header">
    <img src="images/logo_header.png" />
    <div class="header_button">Inicio</div>
</div>
 

Código CSS:

#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;
}
 

Aparentemente todo esta bien pero no funciona. Qué estoy haciendo mal?

[angel_sr]

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.

[kenproxd]

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.