Javascript js div覆盖在IE中不工作

我有一个div，当你鼠标悬停时，它会将图像覆盖成蓝色。很好用！除了-它似乎在IE中根本不起作用

有什么想法吗

js

页面

---

谢谢

使用关键字var声明变量：

而不是：

$overlay = $('#overlay');

使用：

与

$this=$（this）相同

更新--

不知道我在想什么

只要您进行分配，您的javascript就有效，但是IE中的错误来自OverlyMouseOver.js的第15行：

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

这就是你的问题。
IE还不支持rgba。IE9测试版确实如此。在您的情况下，由于覆盖上没有任何文本，因此不需要设置背景不透明度。只需在#覆盖上设置常规不透明度





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

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

你把z-index添加到div了吗？顺便说一句，你得到了一个有趣的页面！谢谢我是一名艺术家，而不是一名网络开发人员（显然）。这是我尝试做我自己的网站。这甚至没有试图回答这个问题，是吗？当然，这是不好的做法，但这不是问题的根源。不使用“var”只会使变量变为全局变量（不好的做法）@Juan Mendes，@josh.trow-谢谢大家的评论。见我的更新。@Josiah。您所说的是正确的，只是IE8和其他浏览器一样，现在在定义对象时接受尾随逗号。起初我很困惑，我没有注意到它，那是因为IE没有抛出错误。@josiah谢谢你给我看这个！我不知道不使用“var”使其全球化。看起来，即使有错放的逗号（我已经删除了它），它在IE中也不会变成蓝色。正如Juan指出的，rgba在IE中不起作用。现在我唯一的问题是我不能点击IE中的div…@Juan谢谢！这很有帮助。我明白了，我只需要把背景色变成0000ff就行了。除了，IE现在不允许我点击div。这是因为IE也不支持指针事件CSS属性。因此，您的div覆盖了您的链接，而他们没有接收到您的链接clicks@Juan .... 该死。有没有办法点击IE中的div？我现在明白了。不支持。@Rollin，uhhhh。。。我建议了一个解决办法。。。你试过了吗？另外，请修复缩进，缩进严重的代码通常是粗心大意的表现。@Juan-最好在覆盖图上用链接href设置自定义数据属性。并且有一个回调函数来读取要重定向的数据属性。
#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');
       });
  });