0

So I have some javascript that looks like this: 

var headshot = {
  enter: function(e) {
    $(e.target).find('.overlay').slideDown();
  },

  exit: function(e) {
    $(e.target).find('.overlay').slideUp();
  }
}
····
$(function() {
  $('.headshot').hover(headshot.enter, headshot.exit);
});

and some html(haml) that looks like this: 

.board-row
  .headshot
    .overlay
      blahblah
      %br
      Chief Javascript Architect
  .headshot
    .overlay
      blah
      %br
      Liason
  .headshot
    .overlay
      etc
      %br
      Kati Roll Advocate
  .headshot
    .overlay
      blah
      %br
      Javascript Developer

With a little CSS like so: 

  .board-container {
    margin-top: 60px;
    padding: 0;
  }
··
  .board-row {
    padding: 0;
    width: 100%;
    height: 200px;
    }

  .headshot {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 24%;
  }

  .overlay {
    width: 24%;
    height: 50%;
    opacity: 0.3;
    background: black;
    position: absolute;
    display: none;
    color: white;
  }

I figured the javascript in conjunction with everything else would create a nice slide animation with the opaque div showing up over the headshots containing the text in the html. When I hover over the image, that indeed happens (although I'm not sure why I need to set the CSS width and height on the overlay to 24% and 50%, respectively, I thought it would take on the width and height of the headshot parent element if I set them to 100%). However, when I hover off of the headshot or to a different headshot, the overlays still stick despite my exit function. What gives? Every now and then one will slide away, but it's the exception not the rule...

user1427661
  • 11,158
  • 28
  • 90
  • 132
  • I'm about to turn my computer on but you have a position absolute element (overlay) with out any position relative element containing it. – Josh Powell Oct 13 '13 at 16:46
  • Thanks -- that fixes the issue with having to set the width and height to weird numbers, but I'm still getting a strange sticking overlay effect with the javascript hover functions. – user1427661 Oct 13 '13 at 17:46

1 Answers1

0

In your exit function, the e.target sometimes catches the div with the 'overlay' class itself, so the code:

$(e.target).find('.overlay')

returns nothing.

Fix your exit function to this:

exit: function(e) {
    $(e.currentTarget).slideUp();
  }

Here is a good explanation - Difference between e.target and e.currentTarget

Community
  • 1
  • 1
Eran H.
  • 1,146
  • 1
  • 8
  • 18