Foros del Web » Creando para Internet » CSS »

Fade de varias imagenes que tengan la misma clase

Estas en el tema de Fade de varias imagenes que tengan la misma clase en el foro de CSS en Foros del Web. Tengo 3 links. Quiero que cada uno afecte al pasar el mouse por encima a las imagenes que tengan la misma class. Por ejemplo, tengo ...
  #1 (permalink)  
Antiguo 12/11/2011, 10:22
 
Fecha de Ingreso: marzo-2011
Ubicación: Buenos Aires
Mensajes: 1
Antigüedad: 13 años
Puntos: 0
Fade de varias imagenes que tengan la misma clase

Tengo 3 links. Quiero que cada uno afecte al pasar el mouse por encima a las imagenes que tengan la misma class.

Por ejemplo, tengo 9 imagenes y 2 con una class supongamos VERDE y las otras 4 con otra class ROJA. y 3 con la clase AZUL

lo que quiero hacer es que si hago rollover sobre el link que dice VERDE, este haga que todas las imagenes que NO tengan la clase VERDE, o sea que sean ROJO O AZUL hagan un fade de 100 a 30% de opacity.

Esto lo logré usando DIVs con ID y el SpryAsset de Dreamweaver, pero a la hora de modificar es medio chino.

Pueden ver el ejemplo en el siguiente link.
http://www.parraud.com.ar/fade/
  #2 (permalink)  
Antiguo 13/11/2011, 12:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 5
Respuesta: Fade de varias imagenes que tengan la misma clase

Con jquery es muy sencillo

haces un evento de hover y le añades una clase de opacidad, te dejo un ejemplo que te he creado:

Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
span
{
cursor:pointer;
}
.azul
{
height:100px;
width:100px;
background:blue;
}
.verde
{
height:100px;
width:100px;
background:green;
}
.rojo
{
height:100px;
width:100px;
background:red;
}
.opacidad
{
opacity:0.1;
}
</style>
<script>
$(document).ready(function(){
	$('span').hover(function(){
		$('div:not(.'+$(this).text()+')').addClass("opacidad");
	},function(){
		$('div').removeClass("opacidad");
	});
})
</script>
<div class="azul"></div>
<div class="verde"></div>
<div class="rojo"></div>

<span>rojo</span>
<span>verde</span>
<span>azul</span>
es fundamental añadir la libreria jquery, tenemos 3 clases y una de opacidad,
cuando nos ponemos encima del div ponemos a todos los que no tienen la clase del span la clase opacidad y cuando te sales del hover le kitamos a todos los div la clase.

espero que te sirva.
un saludo!
__________________
perfumes de imitacion
  #3 (permalink)  
Antiguo 13/11/2011, 16:48
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Fade de varias imagenes que tengan la misma clase

se puede hacer con css3. sólo has de cambiar el orden, primero los vínculos y después las imágenes. a partir de aquí con selector de hijos y selector general de hermanos accedes a los elementos que quieres cambiar. cambias la opacidad
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 14/11/2011, 06:13
 
Fecha de Ingreso: mayo-2010
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 5
Respuesta: Fade de varias imagenes que tengan la misma clase

si, pero con efecto fade?..
__________________
perfumes de imitacion
  #5 (permalink)  
Antiguo 14/11/2011, 08:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Fade de varias imagenes que tengan la misma clase

te suena la propiedad transition??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 14/11/2011, 10:53
 
Fecha de Ingreso: mayo-2010
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 5
Respuesta: Fade de varias imagenes que tengan la misma clase

no la conocía, gracias! xd
__________________
perfumes de imitacion

Etiquetas: clase, fade, imagenes
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 11:33.