CODEWITHSUNDEEP
javascriptjquery
fackz
fackz

Reputation: 531

jquery image over doesnt work

I'm trying to apply an over effect on my photo slider. I have the following code structure:

<div class="corpo_itens">
    <div class="foto-carousel">
        <div class="transparencia">
            <span>A Novilha Rebelde (The Sound of Mu)</span>
            <br /><br />
            Elisa Queiroz e Erly Vieira Jr., 18 min, Vitória (ES), 2005
        </div>
        <img src="img/foto_carousel1.jpg" alt="Nome da foto" />
        <div class="icon-foto"><img src="img/icon_video.png" alt="Vídeo" /></div>
    </div>
    <div class="clear"></div>
</div>

What I'm trying to do is fadein and fadeout the "transparencia" div when the mouse rollover the image. This slider have different images and with following code it worked but it hide and show all divs at the same time...I have no clue how to solve it...

$('.foto-carousel').hover(
 function () {$('.transparencia').css({"display":"block"});}, 
 function () {$('.transparencia').css({"display":"none"});}
);

Upvotes: 1

Views: 61

Answers (2)

Musa
Musa

Reputation: 97717

If you want to hide/show only the .transparencia inside the hovered .foto-carousel you'll have to specify context, like

$('.foto-carousel').hover(
    function () {$('.transparencia', this).css({"display":"block"});}, 
    function () {$('.transparencia', this).css({"display":"none"});}
);

Upvotes: 1

ZeeCoder
ZeeCoder

Reputation: 981

$(".corpo_itens img").onmouseover(function(){
  $(this).parent().children(".transparencia").fadeIn(100);
});
$(".corpo_itens img").onmouseout(function(){
  $(this).parent().children(".transparencia").fadeOut(100);
});

Or something like this.

Upvotes: 0

Related Questions