JS Div оверлей не работает в IE

Question

У меня есть этот div, который накладывает изображения на синий цвет при наведении курсора мыши.Работает красиво!За исключением - похоже, что он вообще не работает в IE.

Есть идеи?

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

Страница http://www.rollinleonard.com/elements

Спасибо!

Answer 1

IE еще не поддерживает rgba. IE9 бета делает. В вашем случае, поскольку у вас нет текста на оверлее, вам не нужно устанавливать прозрачность фона. Просто установите обычную прозрачность на # оверлея.

#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-браузер Поддержка /

Обновление : Как вы упомянули, клики не переходят по ссылкам. Одним из подходов является добавление обработчика к оверлею, копирование базовой ссылки.

  $(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');
       });
  });

Answer 2

Используйте ключевое слово var для объявления ваших переменных:

вместо:

$overlay = $('#overlay');

Использование:

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

То же самое с $this = $(this);

Обновление -

Не уверен, о чем я думал.

Пока вы делаете назначение, ваш javascript действителен, однако ошибка в IE исходит из строки 15 файла overlaymouseover.js:

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

И это ваша проблема.