Problema al acomodar un hover

[kenproxd]

Hola a todos,

Tengo la siguiente columna:

Código HTML:

<div id="tabla_derecha">
 
    <img src="images/ingresar.png" />
    <div class="separador_title"> </div>
    .........
</div>
 

el CSS:

Código CSS:

#tabla_derecha {
    float: right;
}
.separador_title {
    background: #bbbbbb;
    height: 2px;
    width: 140px;
    margin-top: 4px;
    margin-bottom: 8px;
}
 

lo cual se ve de la siguiente manera:



Mi intención es hacer que el div separador_title cambie de color cuando el mouse este encima del div tabla_derecha.

Como ven en la imagen, separador_title sólo ocupa un espacio mínimo y tabla_derecha es el div que contiene todo lo sombreado.

Espero que puedan ayudarme :) saludos

[davidbrepe]

con jquery es muy sencillo

Código HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".separador_title").mouseover(function() {
     $("#tabla_derecha").css({'background':'#FF0000',});
   });
 
});
</script>
 

Un saludo!

[kenproxd]

Muchas gracias! me funcionó de maravilla.

Un abrazo.

[rjulio21]

con la misma hoja de estilo es mas facil. no es necesario usar js. con poner
.separador_title:hover{
background:#color;

}
deberia funcionar-.....

[davidbrepe]

Iniciado por rjulio21

con la misma hoja de estilo es mas facil. no es necesario usar js. con poner
.separador_title:hover{
background:#color;

}
deberia funcionar-.....

pero el quiere que se cambie de color al pasar el ratón sobre #tabla_derecha...
ojala se pudiera hacer algo asi...

Código CSS:

.separador_title:hover #tabla_derecha {
      background:#color;
 
}
 

Un saludo!

[kseso?]

otro fan de las librerías js.
Con lo fácil, sencillo y sin necesidad de cargar toda una librería que es

Código CSS:

#tabla_derecha:hover .separador_title {/*propiedades*/}
 

Y ya que estamos, un poco de semántica vendría bien. Para qué utilizar un div vacío para emular una etiqueta que su función precisamente es esa, hacer de separador:

Código HTML:

<hr />
 

O incluso, declarar el border-top de #tabla-derecha

[davidbrepe]

que idiota soy... estaba pensando en mouseout...
el hover claro que se puede hacer con css

[kenproxd]

Gracias @kseso?!

revisaré sobre lo que dijiste a ver si con eso optimizo mi sistema, mil gracias :)