Question

我有这个div，它会覆盖图像，以便在鼠标悬停时将它们涂成蓝色。很好用！除了 - 它似乎根本不适用于IE。

有什么想法吗？

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

页面 http://www.rollinleonard.com/elements

谢谢！

Answer 1

使用关键字var声明变量：

而不是：

$overlay = $('#overlay');

使用：

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

与$this = $(this);

相同

更新 -

不确定我在想什么。

只要您正在进行作业，您的javascript就有效，但IE中的错误来自overlaymouseover.js的第15行：

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

这就是你的问题。

Answer 2

IE尚不支持rgba。 IE9 beta确实如此。在您的情况下，由于叠加层上没有任何文本，因此您无需设置背景不透明度。只需在#overlay上设置常规不透明度。

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

更新：正如您所提到的，点击不会转到链接。一种方法是向覆盖添加处理程序，复制底层链接。

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

js div overlay在IE中不起作用

2 个答案: