Foros del Web » Creando para Internet » CSS »

Cambiar color de div al pasar cursor

Estas en el tema de Cambiar color de div al pasar cursor en el foro de CSS en Foros del Web. Como cambio el color de un div cuando paso el cursor sobre el, justo como he visto en varios sitios como youtube en los comentarios, ...
  #1 (permalink)  
Antiguo 11/08/2010, 01:54
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Cambiar color de div al pasar cursor

Como cambio el color de un div cuando paso el cursor sobre el, justo como he visto en varios sitios como youtube en los comentarios, de antemano gracias :)
  #2 (permalink)  
Antiguo 11/08/2010, 02:07
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

<div onmouseover="this.style.backgroundColor='#999'"></div>

Si quieres que cuando salga del <div> recupere el color que tenia solo tienes que añadir onmouseout="this.style.backgroundColor='color'".

Espero que te sirva de ayuda! :)

Última edición por Gashe; 11/08/2010 a las 02:50
  #3 (permalink)  
Antiguo 11/08/2010, 02:23
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Cambiar color de div al pasar cursor

Si funciona en un div comun pero este funciona asi:

Código PHP:
Ver original
  1. echo '<div class="divnoti" onmouseover="this.style.backgroundColor="#999"">' ,substr($cadena,0,strpos($cadena,' ',350)) ,' ...<br><a href="./noticialog.php?idn='.$cateFila["idnoticia"].'">Ver más ...</a><hr color="#e1e1e1"></hr></div>

Si uso this.style.backgroundColor='#999'" me da problemas debo usarlo como ="#999" pero asi no funcionaria

Última edición por MarioAlejandroCR2; 11/08/2010 a las 02:36
  #4 (permalink)  
Antiguo 11/08/2010, 02:37
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

Si lo ejecutas directamente en el div:

<div onmouseover="this.style.backgroundColor='#999'" onmouseout="this.style.backgroundColor=''"></div>

Solo cambiaria este div. Si por el contrario lo ejecutas desde una funcion en javascript, solo tienes que añadirle una id al div, algo como esto:

<script>
function efecto(tipo)
{
if(tipo == 0)
document.getElementById('dv1').style.backgroundCol or='#999';
else
document.getElementById('dv1').style.backgroundCol or='';
}
</script>

<div id="dv1" onmouseover="efecto(0)" onmouseout="efecto(1)">TEXTO</div>

Última edición por Gashe; 11/08/2010 a las 02:51
  #5 (permalink)  
Antiguo 11/08/2010, 02:45
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

Solo un comentario, que me he dado cuenta porque no le funciona por si habias hecho un copy/paste:

Gashe ha hecho bien con onmouseover y onmouseout, pero en el segundo le falta cerrar una comilla simple.

Escribió:

onmouseout="this.style.backgroundColor='color"

Y lo correcto es:

onmouseout="this.style.backgroundColor='color'" <-- faltaba cerrar con una comilla simple.


Saludos.
  #6 (permalink)  
Antiguo 11/08/2010, 02:50
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

jejeje Cierto!! corregido cereal ;)
  #7 (permalink)  
Antiguo 11/08/2010, 02:54
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

Cita:
Iniciado por MarioAlejandroCR2 Ver Mensaje
Si funciona en un div comun pero este funciona asi:

Código PHP:
Ver original
  1. echo '<div class="divnoti" onmouseover="this.style.backgroundColor="#999"">' ,substr($cadena,0,strpos($cadena,' ',350)) ,' ...<br><a href="./noticialog.php?idn='.$cateFila["idnoticia"].'">Ver más ...</a><hr color="#e1e1e1"></hr></div>

Si uso this.style.backgroundColor='#999'" me da problemas debo usarlo como ="#999" pero asi no funcionaria
Al meterlo dentro de php, te haces un lio con las comillas, para no liarte puedes hacer esto cuando toque la sentencia de php:

?><div class="divnoti" onmouseover="this.style.backgroundColor='#999'"><? php echo substr($cadena,0,strpos($cadena,' ',350)) , ..... ?></div>

Y recuerda las comillas dentro del onmouseover, despues de las dobles, van las simples onmouseover="this.style.backgroundColor='#999'"

Última edición por Gashe; 11/08/2010 a las 03:10
  #8 (permalink)  
Antiguo 11/08/2010, 04:20
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Cambiar color de div al pasar cursor

Según las normas del PHP, si dentro del echo, tienes que añadir una doble comillas, deberás poner antes el símbolo \ para interpretar que el doble comillas es el texto en lugar de cerrar el echo.

O sea,

Código:
echo "Hola, mi alias es "Cereal"";
Salida en la pantalla: Hola, mi alias es

No funciona bien porque se ha cerrado el echo antes de la palabra Cereal.

Con lo cual puedes hacer lo siguiente:

Código:
echo "Hola, mi alias es \"Cereal\" ";
Salida en la pantalla: Hola, mi alias es "Cereal"


Saludos.

Etiquetas: color, cursor, pasar
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 15:13.