Foros del Web » Creando para Internet » CSS »

efecto mouseover para <div>

Estas en el tema de efecto mouseover para <div> en el foro de CSS en Foros del Web. Hola, he estado investigando acerca de hacer un efecto mouse over con imagenes. - Para imagenes de fondo parece bastante facil usando el estado :hover. ...
  #1 (permalink)  
Antiguo 17/07/2008, 15:33
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
efecto mouseover para <div>

Hola, he estado investigando acerca de hacer un efecto mouse over con imagenes.

- Para imagenes de fondo parece bastante facil usando el estado :hover.

-mi idea es hacerlo para un div completo que consta de texto y una imagen
- Mi idea es usar un div por defecto con los bordes en gris y la imagen en blanco y negro. Al hacer mouseover se cambia por un div en el que los bordes estan a color y la imagen tambien.

- He leido que se pued hacer usando el display y z-index, pero no si esto es asi, y si lo es, no consigo dar con el codigo.

Tambien acepto cualquier otra solucion para mi problema.

muchas gracias de antemano.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!

Última edición por PedroRodas; 17/07/2008 a las 15:36 Razón: el titulo no era muy preciso
  #2 (permalink)  
Antiguo 17/07/2008, 17:40
 
Fecha de Ingreso: abril-2008
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: efecto mouseover para <div>

Acabo de hacer uno parecido y lo hice creando 2 estilos, por ejemplo uno llamado boton con las características del boton inactivo y otro llamado botón_over con las características del botón con mouse over.

Luego hago el cambio de estilos con javascript en un onmouseover del div:

document.getElementById(id).className="boton_over" ;

Saludos
  #3 (permalink)  
Antiguo 17/07/2008, 18:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

Mira este ejemplo a ver si te gusta, sin javascript, sólo css. Es justo lo contrario pero igual te puede servir de ejemplo.

Mikel.
  #4 (permalink)  
Antiguo 18/07/2008, 04:48
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

muchas gracias Mikel, pero en mi pregunta decia que ese ejemplo, el del background-image, lo habia conseguido.

Lo que trato de hacer es hacer este efecto para un div q consta de texto e imagenes y un borde.

quiero hacer que en el estado de reposo este el borde en gris y la imagen en blanco y negro, y al hacer mouseover cambia la imagen se pone a color y el borde en color tb. Por eso he pensao en hacerlo con algun tipo de display y z index o algo asi.

Mirar primer post para mas datos.

muchas gracias.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #5 (permalink)  
Antiguo 18/07/2008, 05:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

De acuerdo, lo había leido, pero no entendí qué es lo que quieres hacer que no se pueda hacer con un fondo. ¿Irá una imagen incrustada y el texto encima? ¿el texto también cambia de color? ¿los bordes no los puede llevar incorporados la imagen en lugar de la caja? etcétera.

No lo entendí, ni lo tengo nada claro.

Mikel.
  #6 (permalink)  
Antiguo 18/07/2008, 05:20
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

Esta bien, mea culpa. Probablemente lo que busco puede hacerse co la solucion que tu me has dado. voi a dart todos la datos q pueda. asi mismo alguien podria decirme donde colgar una imagen para que la podadis ver y asi verlo mejor??

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA - OCIO</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0; }

#contenedor{
width:768px;
    min-height:100%;
    height: auto!important;
    height:100%;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}

.principal{
width:500px;
float:left;
}
.secundario{
width:256px;
float:left;
text-align:right;
}

.portada {
height:100px; 
margin-top:1em; 
padding:5px; 
border:#ccc 1px solid; 
}
.portada h1{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#A177B2 3px solid; }
p.primero{margin-top:1em;}
</style>
</head>
<body>
	<div id="contenedor">	
		<div class="portada">
			<div class="principal">
			<h1>ESPECIALIDADES</h1>
			<p class="primero">En la Trattoria <strong>La Veneziana</strong>ofercemos una amplia variedad de platos de cocina italiana, 
			entre los que destacamos nuestra <strong>pizza serrana</strong>, el <strong>carpaccio de buey</strong>, las lasañas,
			<strong>la pasta rellena</strong>, y nuestro exquisito <strong>tiramis&uacute;.</strong></p> 
			</div>
			<div class="secundario">
			<img src="imgs/especialidades.jpg" alt="aqui va la imagen" title="Ir a mapas de acceso al restaurante" width="250px" height="100px"/>
			</div>	
		</div>
	</div>
</body>
</html> 
Mi idea es que al hacer mouseover sobre cualquier parte del div(delimitado por el borde gris), se cambie el border-bottom del titulo y la imagen (no es background)

La imagen no la he colocado como background xq de esa forma no consegui que respetara el padding del div.

Pero me vale cualquie idea que me deis, aunque vaya por otro lao

muchas gracias!!!
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #7 (permalink)  
Antiguo 18/07/2008, 09:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

Antes de nada te comento un problema que te vas a encontrar: si quieres convertir todo ese bloque en un enlace, eso no te validará, porque un elemento de línea como "a" no admite dentro de sí elementos de bloque. Otra cosa es que te importe si valida o no, pero es más que nada por que lo sepas.

Mikel.
  #8 (permalink)  
Antiguo 19/07/2008, 05:02
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

de acuerdo muchas gracias, voy a optar entonces por hacer una imagen de fondo que ocupe todo el div, y los textos iran encima, espero mostrar pronto el resultado para que podais dar vuestrs opinion.

muchas gracias de nuevo
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #9 (permalink)  
Antiguo 19/07/2008, 08:27
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

lo he hecho haciendo una imagen que contiene todo, incluso los textos. Es la unica forma con la que podido meter texto con formato dentro ya que no podia meter lementos de bloque como h1 o p dentro del a.

Incluso declarando a display:block? o de esa forma si podria meter los h1 y p dentro.

Bueno, yo he hecho una imagen grande con todo, borde testo, subrayado e imagen, y se cambia por otra en el a:hover.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #10 (permalink)  
Antiguo 19/07/2008, 11:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

Hola, Pedro.

Tenía un rato y me he puesto a hacer este ejemplo

Es el código que estabas usando en principio, bastante modificado, con la imagen del fondo y el truco del posicionamiento que te decía.

Es perfectamente válido xhtml strict y css2. El texto es texto, no imagen, aunque igualmente no se puede seleccionar porque está dentro del enlace, pero mucho más fácil de editar. No es demasiado complicado, y funciona muy bien en FF y IE6:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>TRATTORIA LA VENEZIANA - OCIO</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0;
}
#contenedor{
width:768px;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}
.portada {
height:100px;
margin-top:1em;
padding:5px;
border:#ccc 1px solid;
}
a.principal{
display: block;
text-decoration: none;
background: url(img/40.jpg) no-repeat right top;
height:100px;
}
a.principal:hover {background-position: right bottom;
}
a.principal:hover span.titulo {border-color: #0f0;
}
span.titulo{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#A177B2 3px solid;
display: block;
margin-right: 260px;
color: #000;
}
span.primero{margin-top:1em;
display: block;
margin-right: 260px;
color: #000;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="portada">
<a href="#" class="principal">
<span class="titulo">ESPECIALIDADES</span>
<span class="primero">En la Trattoria <strong>La Veneziana</strong>ofercemos una amplia variedad de platos de cocina italiana,
entre los que destacamos nuestra <strong>pizza serrana</strong>, el <strong>carpaccio de buey</strong>, las lasañas,
<strong>la pasta rellena</strong>, y nuestro exquisito <strong>tiramis&uacute;.</strong></span>
</a>
</div>
</div>
</body>
</html>
A ver si te sirve, que lo del texto en imagen me parece el último recurso.

Mikel.
  #11 (permalink)  
Antiguo 24/07/2008, 04:29
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

Eres un makinon, lo tuyo no es normal!!!!

No te imaginas el cable que me acabas de echar, y gracias por recordarmelo en mi otra consulta. Joder voy a tener que invitarte a un fin de semana en cadiz en la playita, y te presento a mi prima o lo que haga falta, jajjajaja.

muchas gracias tio, q arte picha!
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #12 (permalink)  
Antiguo 24/07/2008, 04:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>



Tendrías que verme: soy más blanco que los noruegos. En la playa la gente se vuelve a mirarme Si voy contigo te avergüenzo.

Mikel.
  #13 (permalink)  
Antiguo 24/07/2008, 05:42
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

una cosa Mikel, donde esta la imagen que aparece cuando el hover. A mi me funciona bien si cambio tu linea
Código HTML:
a.principal:hover {background-position: right bottom;}
por esta otra:
Código HTML:
a.principal:hover {background: url(../imgs/fondo2.jpg) no-repeat right top;}
No entiendo muy bien como consigues el efecto con esa sentencia.

Pero bueno el caso es que cambiando eso lo he conseguido y te lo vuelvo a agradecer.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #14 (permalink)  
Antiguo 24/07/2008, 06:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

Es que la imagen la llamo en el enlace, y por eso ya sólo basta con cambiarle la posición en el :hover:

Cita:
a.principal{
display: block;
text-decoration: none;
background: url(img/40.jpg) no-repeat right top;
height:100px;
}
a.principal:hover {background-position: right bottom;
}
Mikel.
  #15 (permalink)  
Antiguo 24/07/2008, 06:33
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: efecto mouseover para <div>

Tienes una solo imagen que incluye la imagen en color y tb en blanco y negro no? y al cambiar la posicion se visualiza una parte u otra de la misma imagen verdad?

Solo asi lo entenderia.

Seras blanquito, pero eres un genio. Yo estoy moreno, pero me queda mucho que aprende... jejjeje
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #16 (permalink)  
Antiguo 24/07/2008, 07:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: efecto mouseover para <div>

Sï, ese era el truco del que te hablaba al principio: sólo cargas una imagen y le cambias la posición, de esa manera es mucho más rápido el cambio, pesa menos y hace una única petición al servidor. Es más eficiente en todos lo sentidos.

Mikel.
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 09:19.