[SOLUCIONADO] Aplicar mismo efecto a varios enlaces

[waspeis]

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:

.clase
{
    background-color: #DCF3F9;
    font-style: italic;
    font-face: arial;
}
 

Código Javascript:

$(document).ready(function()
{
    $("#enlace").mouseover(function(event)
    {
        $("#capa").addClass("clase");
    });
    $("#enlace").mouseout(function(event)
    {
        $("#capa").removeClass("clase");
    });
});
 

Código HTML:

<div id="capa"><font face="arial">Esta es la capa</font></div><br><br>
<a id="enlace" href="">Efecto que se aplica al pasar el ratón</a><br>
<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

[xfxstudios]

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

Código HTML:

<div id="capa" class="defecto">Esta es la capa</div><br><br>
<a id="enlacea" class="primero" href="">Efecto que se aplica al pasar el ratón</a><br>
<a id="enlaceb" class="segundo" href="">Efecto que se aplica al pasar el ratón</a>
 

Código CSS:

.defecto{
  padding:15px;
}
.primera{
  color:#ff0080;
  background-color:#ffc6e2
}
.segunda{
  color:#00df00;
  background-color:#004040
}
 

Código Javascript:

$(function(){
        $("a").hover(function(){
        var id = $(this).attr('id');
      if(id=="enlacea"){
        $("#capa").removeClass("segunda");
        $("#capa").addClass("primera");
      }else{
        $("#capa").removeClass("primera");
        $("#capa").addClass("segunda");
      }
    })
    
    
    $("a").mouseleave(function(){
        $("#capa").removeClass("segunda");
      $("#capa").removeClass("primera");
    })
})
 

VER MUESTRA

Imagino hay formas más simples, pero es un comienzo. Saludos

[waspeis]

Gracias xfxstudios,

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

Código Javascript:

$(document).ready(function()
{
    $(".enlace").mouseover(function(event)
    {
        $("#capa").addClass("clase");
    });
    $(".enlace").mouseout(function(event)
    {
        $("#capa").removeClass("clase");
    });
});
 

Código HTML:

<div id="capa"><font face="arial">Esta es la capa</font></div><br><br>
<a class="enlace" href="">Efecto que se aplica al pasar el ratón</a><br>
<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