Foros del Web » Creando para Internet » CSS »

Problema al acomodar un hover

Estas en el tema de Problema al acomodar un hover en el foro de CSS en Foros del Web. Hola a todos, Tengo la siguiente columna: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = "tabla_derecha" >       < img src ...
  #1 (permalink)  
Antiguo 01/03/2011, 06:46
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 8 años, 4 meses
Puntos: 8
Problema al acomodar un hover

Hola a todos,

Tengo la siguiente columna:

Código HTML:
Ver original
  1. <div id="tabla_derecha">
  2.  
  3.     <img src="images/ingresar.png" />
  4.     <div class="separador_title"> </div>
  5.     .........
  6. </div>

el CSS:

Código CSS:
Ver original
  1. #tabla_derecha {
  2.     float: right;
  3. }
  4. .separador_title {
  5.     background: #bbbbbb;
  6.     height: 2px;
  7.     width: 140px;
  8.     margin-top: 4px;
  9.     margin-bottom: 8px;
  10. }

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
  #2 (permalink)  
Antiguo 01/03/2011, 09:29
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al acomodar un hover

con jquery es muy sencillo

Código HTML:
Ver original
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $(".separador_title").mouseover(function() {
  5.      $("#tabla_derecha").css({'background':'#FF0000',});
  6.    });
  7.  
  8. });

Un saludo!
  #3 (permalink)  
Antiguo 01/03/2011, 10:00
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 8 años, 4 meses
Puntos: 8
Respuesta: Problema al acomodar un hover

Muchas gracias! me funcionó de maravilla.

Un abrazo.
  #4 (permalink)  
Antiguo 01/03/2011, 10:58
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 6 años, 9 meses
Puntos: 16
Respuesta: Problema al acomodar un hover

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

}
deberia funcionar-.....
  #5 (permalink)  
Antiguo 01/03/2011, 13:00
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al acomodar un hover

Cita:
Iniciado por rjulio21 Ver Mensaje
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:
Ver original
  1. .separador_title:hover #tabla_derecha {
  2.       background:#color;
  3.  
  4. }


Un saludo!
  #6 (permalink)  
Antiguo 01/03/2011, 14:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema al acomodar un hover

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:
Ver original
  1. #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:
Ver original
  1. <hr />

O incluso, declarar el border-top de #tabla-derecha
  #7 (permalink)  
Antiguo 01/03/2011, 15:06
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema al acomodar un hover

que idiota soy... estaba pensando en mouseout...
el hover claro que se puede hacer con css
  #8 (permalink)  
Antiguo 01/03/2011, 17:43
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 8 años, 4 meses
Puntos: 8
Respuesta: Problema al acomodar un hover

Gracias @kseso?!

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

Etiquetas: hover
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 01:58.