Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Aplicar mismo efecto a varios enlaces

Estas en el tema de Aplicar mismo efecto a varios enlaces en el foro de Jquery en Foros del Web. Buenas, Quiero que al pasar el ratón por un enlace se aplique un pequeño efecto sobre una capa. La idea es que habrá dos grupos ...
  #1 (permalink)  
Antiguo 22/02/2018, 03:53
 
Fecha de Ingreso: julio-2013
Mensajes: 44
Antigüedad: 6 años, 4 meses
Puntos: 0
Aplicar mismo efecto a varios enlaces

Buenas,

Quiero que al pasar el ratón por un enlace se aplique un pequeño efecto sobre una capa. La idea es que habrá dos grupos de enlaces, con un grupo se aplicará un efecto y con otro grupo se aplicará otro distinto.

Código CSS:
Ver original
  1. .clase
  2. {
  3.     background-color: #DCF3F9;
  4.     font-style: italic;
  5.     font-face: arial;
  6. }

Código Javascript:
Ver original
  1. $(document).ready(function()
  2. {
  3.     $("#enlace").mouseover(function(event)
  4.     {
  5.         $("#capa").addClass("clase");
  6.     });
  7.     $("#enlace").mouseout(function(event)
  8.     {
  9.         $("#capa").removeClass("clase");
  10.     });
  11. });

Código HTML:
Ver original
  1. <div id="capa"><font face="arial">Esta es la capa</font></div><br><br>
  2. <a id="enlace" href="">Efecto que se aplica al pasar el ratón</a><br>
  3. <a id="enlace" href="">Efecto que se aplica al pasar el ratón</a>

Se que el id no se puede repetir. En este caso sólo sale el efecto cuando se pasa el ratón por el primer enlace. He probado a poner class en lugar de id pero tampoco funciona, en ese caso no funciona con ninguno de los dos enlaces.

Cómo puedo hacer para que se aplique el mismo efecto al pasar el ratón por varios enlaces?

Muchas gracias
  #2 (permalink)  
Antiguo 22/02/2018, 05:36
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 4 meses
Puntos: 263
Respuesta: Aplicar mismo efecto a varios enlaces

No se que es lo que no te funciono, prueba así:

Código HTML:
Ver original
  1. <div id="capa" class="defecto">Esta es la capa</div><br><br>
  2. <a id="enlacea" class="primero" href="">Efecto que se aplica al pasar el ratón</a><br>
  3. <a id="enlaceb" class="segundo" href="">Efecto que se aplica al pasar el ratón</a>

Código CSS:
Ver original
  1. .defecto{
  2.   padding:15px;
  3. }
  4. .primera{
  5.   color:#ff0080;
  6.   background-color:#ffc6e2
  7. }
  8. .segunda{
  9.   color:#00df00;
  10.   background-color:#004040
  11. }

Código Javascript:
Ver original
  1. $(function(){
  2.         $("a").hover(function(){
  3.         var id = $(this).attr('id');
  4.       if(id=="enlacea"){
  5.         $("#capa").removeClass("segunda");
  6.         $("#capa").addClass("primera");
  7.       }else{
  8.         $("#capa").removeClass("primera");
  9.         $("#capa").addClass("segunda");
  10.       }
  11.     })
  12.    
  13.    
  14.     $("a").mouseleave(function(){
  15.         $("#capa").removeClass("segunda");
  16.       $("#capa").removeClass("primera");
  17.     })
  18. })

VER MUESTRA

Imagino hay formas más simples, pero es un comienzo. Saludos
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 22/02/2018, 10:57
 
Fecha de Ingreso: julio-2013
Mensajes: 44
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Aplicar mismo efecto a varios enlaces

Gracias xfxstudios,

Ya me di cuenta dónde fallaba el mío...

Código Javascript:
Ver original
  1. $(document).ready(function()
  2. {
  3.     $(".enlace").mouseover(function(event)
  4.     {
  5.         $("#capa").addClass("clase");
  6.     });
  7.     $(".enlace").mouseout(function(event)
  8.     {
  9.         $("#capa").removeClass("clase");
  10.     });
  11. });

Código HTML:
Ver original
  1. <div id="capa"><font face="arial">Esta es la capa</font></div><br><br>
  2. <a class="enlace" href="">Efecto que se aplica al pasar el ratón</a><br>
  3. <a class="enlace" href="">Efecto que se aplica al pasar el ratón</a>

Así también funciona, sólo que el efecto es el mismo para los dos enlaces. Tendría que crear otra clase en CSS con otro color y listo

Thanks

Etiquetas: efecto, enlaces
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 02:31.