Al hacer onmouseover el elemento parpadea

[pinchu]

Bueno la duda no se si es más de css o de javascript pero lo pondré aquí.Tengo este codigo de jquery:

$("img#principal").mouseover(function(event){
$("a#linkCambiarPrincipal").css("display","inline" );
});

$("img#principal").mouseout(function(event){
$("a#linkCambiarPrincipal").css("display","none" );
});

Lo que hace esto es mostrar el enlace a#linkCambiarPrincipal cuando estoy sobre la imagen img#principal y ocultarlo cuando salgo de esa imagen.El problema es que cuando me pongo sobre el enlace (que está posicionado sobre la propia imagen) este empieza a parpadear.

Lo que entiendo que pasa es que parpadea pq no estoy exactamente encima de la imagen sino que estoy sobre el enlace que está posicionado sobre la imagen.

¿Como se soluciona esto?¿Suele hacerse de otra manera?

Muchas gracias

[David]

Todo depende de dónde está el enlace que se muestra/oculta. Ya que si se muestra encima de la imagen, parpadeará debido a que provocará el evento onmouseout de la imagen.

[pinchu]

Eso es exactamente lo que pasa.¿Como se soluciona?

[David]

Prueba usando el evento onmouseout del enlace en lugar del de la imagen.

[pinchu]

Pero eso lo que haría es que al entrar en la imagen apareciera el enlace y al salir de la imagen el enlace siguiera mostrandose.Por lo tanto habría que pasar al menos una vez sobre el enlace para que desapareciera.

[David]

Muestra cómo tienes los elementos en cuestión, de lo contrario será difícil ayudarte.

[pinchu]

David gracias por tus respuestas pero no sé que más explicar.Ya lo he dicho antes:

Tengo un enlace y una imagen,mediante position: relative, top y left he posicionado el enlace sobre la imagen.

Lo que quiero es que cuando el cursor entre en la imagen se muestre el enlace y cuando salga de la imagen desaparezca el enlace.

Y lo que ocurre es que cuando entro en la imagen se muestra el enlace pero cuando me pongo sobre el, éste se pone a parpadear pq se está disparando el evento onmouseout.

¿Hay manera de evitar esto o hacerlo de otro modo?

[David]

Lo que podrías hacer es situar ambos elementos dentro de un mismo contenedor y usar los eventos onmouseout y onmouseover del contenedor.

[pinchu]

Nada, ya probé y estamos en lo mismo.En cuanto me pongo sobre el enlace empieza a parpadear porque deben de estar disparandose los eventos onmouseover y onmouseout continuamente...

No sé, me da que no encontramos la solución...

[David]

Muestra cómo has intentado, cuanto más detalles proporciones será más fácil ayudarte a encontrar la solución.

[pinchu]

Hola de nuevo David(eres el único que me ayuda) tengo algo en este plan:

<style type = "text/css">
a#linkCambiarPrincipal
{
position: relative;
top: 20px;
left: 20px;
display: none;
background: #fff;
cursor: pointer;
}
</style>

<script type = "text/javascript">
$("img#principal").mouseover(function(event){
$("a#linkCambiarPrincipal").css("display","inline" );
});
//Y lo ocultamos al quitarnos de la imagen
$("img#principal").mouseout(function(event){
$("a#linkCambiarPrincipal").css("display","none" );
});
</script>


<a id = "linkCambiarPrincipal" href = "#"> Enlace oculto </a><br/>
<img id = "principal" src = "laquesea" />

[David]

Es que, debes agregar el contenedor (un <div> o <span>), y asignarle los eventos onmouseout y onmouseover (comprobando que el target/srcElement del evento onmouseout no sea el enlace)

[pinchu]

Muchas gracias, lo puse así y ya funciona:

$("div#marcoPrincipal").mouseover(function(event ){

if (this.id != "linkCambiarPrincipal" )
$("a#linkCambiarPrincipal").css("display","inline" );
});
//Y lo ocultamos al quitarnos de la imagen
$("div#marcoPrincipal").mouseout(function(event) {

if (this.id != "linkCambiarPrincipal" )
$("a#linkCambiarPrincipal").css("display","none" );
});

Perdona por las molestias