Home/ Questions/Q 522283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:20:16+00:00

basically I have 4 images with divs set up like this: <div id=selector> <div

  • 0

basically I have 4 images with divs set up like this: 

   <div id="selector">
    <div id="1"><div class="folio_container pk"><div class="overlay"></div></div></div>
    <div id="2"><div class="folio_container ybn"><div class="overlay"></div></div></div>
    <div id="3"><div class="folio_container u"><div class="overlay"></div></div></div>
    <div id="4"><div class="folio_container more"><div class="overlay"></div></div></div>
    <div class="clearfloat"></div>
    </div>

And the css: 

  .folio_container{margin:10px 80px 10px 15px; float:left; position:relative; cursor:pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-position:top left; background-repeat:no-repeat; width:80px; height: 80px;}
.pk{ background-image:url(../images/pk_icon.png) !important;}
.ybn{ background-image:url(../images/ybn_icon.png) !important;}
.u{ background-image:url(../images/u_icon.png) !important;}
.more{ background-image:url(../images/more_icon.png); margin:10px 0px 10px 15px !important;}

.overlay{ background-image:url(../images/overlay.png); background-position:top left; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-repeat:no-repeat; width:80px; height:80px; position:absolute; top:0px; left:0px; display:none;}

How can I get my Jquery so that it fades in the overlay on hover of each separate one, I’ve always got confused with this idea seeing as the div classes are the same, will it not trigger them all at the same time?

Heres the jquery thus far:

$('.overlay').css('display', 'block');
$('.overlay').css('opacity', 0.0);
$('folio_container', this).hover(function() {
    $(this).children('.overlay', this).stop().animate({opacity:1.0},500);
},
function() {
    $(this).children('.overlay', this).stop().animate({opacity:0.0},500);
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Behind the scenes, jQuery iterates each of the divs matched by your selector and binds the over and out functions to each individual element.

    As an aside, I recommend calling stop with both of the optional parameters, clearQueue (to remove any pending animations when you switch between functions) and gotoEnd (to finish the current animation) set to true – this is usually the behavior people want! (See for example, this question.)

    • 0