I have three links, Cat, Dog, Snakes. When I hover over each, the content relating to each link should change.
So if i hover over cat, then cat content will appear, if i hover over dog the cat content will smoothly disappear and the dog content will appear... and so on.
Links are: Dog Cat Snake
<div>
<span style="display:none;"> Cat Content</span>
<span style="display:none;"> Dog Content</span>
<span style="display:none;"> Snake Content</span>
</div>
How do I get this to be full blown working, with some smooth fading?
('.cat').hover(
function () {
$(this).show();
},
function () {
$(this).hide();
}
);
It's the same for the others.
For the smooth fade in you can use fadeIn and 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>
-edit-
yeah sure, here you go -- JSFiddle
I hope my script help you.
<i class="mostrar-producto">mostrar...</i>
<div class="producto" style="display:none;position: absolute;">Producto</div>
My script
<script>
$(".mostrar-producto").mouseover(function(){
$(".producto").fadeIn();
});
$(".mostrar-producto").mouseleave(function(){
$(".producto").fadeOut();
});
</script>