Tengo tres enlaces, Gato, Perro, Serpientes. Cuando paso el mouse sobre cada uno, el contenido relacionado con cada enlace debe cambiar.
Entonces, si coloco el cursor sobre el gato, aparecerá el contenido del gato, si coloco el cursor sobre el perro, el contenido del gato desaparecerá suavemente y aparecerá el contenido del perro... y así sucesivamente.
Los enlaces son: Perro Gato Serpiente
<div> <span style="display:none;"> Cat Content</span> <span style="display:none;"> Dog Content</span> <span style="display:none;"> Snake Content</span> </div>¿Cómo hago para que esto funcione completamente, con un poco de desvanecimiento suave?
('.cat').hover( function () { $(this).show(); }, function () { $(this).hide(); } );Es lo mismo para los demás.
Para un desvanecimiento suave, puede usar fadeIn y fadeOut
jquery:
$('div.animalcontent').hide(); $('div').hide(); $('p.animal').bind('mouseover', function() { $('div.animalcontent').fadeOut(); $('#'+$(this).attr('id')+'content').fadeIn(); });html:
<p class='animal' id='dog'>dog url</p><div id='dogcontent' class='animalcontent'>Doggiecontent!</div> <p class='animal' id='cat'>cat url</p><div id='catcontent' class='animalcontent'>Pussiecontent!</div> <p class='animal' id='snake'>snake url</p><div id='snakecontent'class='animalcontent'>Snakecontent!</div>-editar-
sí claro, aquí tienes -- JSFiddle
Espero que mi guión te ayude.
<i class="mostrar-producto">mostrar...</i> <div class="producto" style="display:none;position: absolute;">Producto</div>mi guion
<script> $(".mostrar-producto").mouseover(function(){ $(".producto").fadeIn(); }); $(".mostrar-producto").mouseleave(function(){ $(".producto").fadeOut(); }); </script>