js div overlay not working in IE

I have this div that overlays i开发者_开发百科mages to color them blue when you mouseover. Works nicely! Except - it doesn't seem to work in IE at all.

Any ideas?

The js http://www.rollinleonard.com/elements/overlaymouseover.js

The page http://www.rollinleonard.com/elements

Thanks!

---

IE doesn't yet support rgba. IE9 beta does. In your case, since you don't have any text on the overlay, you don't need to set background opacity. Just set regular opacity on your #overlay.

#overlay{
   ...
   background-color: rgb(0, 0, 255);
   -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
   ...
}

• http://davidwalsh.name/css-opacity
• http://css-tricks.com/rgba-browser-support/

Update: Like you mentioned, the clicks don't go through to the links. One approach is to add a handler to the overlay, copying the underlying link.

  $(window).load(function(){
      var $overlay = $('#overlay');     
      $('img').bind('mouseenter', function () {
          var $this = $(this);
          if ($this.not('.over')) {
              $this.addClass('over');
              $overlay.css({
                  width  : $this.css('width'),
                  height : $this.css('height'), 
                  top    : $this.offset().top + 'px',
                  left   : $this.offset().left + 'px',
              }).show();
              // This is hacked up,could be better, but works, it replaces the handler
              // everytime you display it
              $overlay.onclick = function() {
                   location.href = $this.getAttribute('href');
              }
          }
       }).bind('mouseout', function () {
           $(this).removeClass('over');
       });
  });

---

Use keyword var to declare your variables:

instead of:

$overlay = $('#overlay');

Use:

var $overlay = $('#overlay');

Same thing with $this = $(this);

Update --

Not sure what I was thinking.

As long as you are making an assignment your javascript is valid, however the error in IE is coming from line 15 of overlaymouseover.js:

left   : $this.offset().left + 'px', // extra comma breaks IE

And that is your problem.