javascript - js div 覆盖在 IE 中不起作用

Question

我有这个 div，当您将鼠标悬停在上面时，它会覆盖图像以将它们着色为蓝色。效果很好!除了 - 它似乎在 IE 中根本不起作用。

有什么想法吗？

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

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

谢谢!

Answer 1

IE 还不支持 rgba。 IE9 beta 可以。在您的情况下，由于叠加层上没有任何文本，因此无需设置背景不透明度。只需在 #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/

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

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