javascript - 使用 IE 过滤器时不应用悬停样式，无法单击元素

Question

我正在尝试创建一个可点击的叠加层以放置在页面的任意部分。叠加层大部分是半透明的，但有一部分是完全不透明的，因此我不能简单地使用不透明度属性。

我能够让它在除 IE 7 和 8 之外的所有浏览器中运行(我不关心 IE 6)。

我的解决方案是简单地使用 rgba 使背景半透明，悬停样式会改变该样式。当然，rgba在IE 9之前是不可用的，所以我用filter和-ms-filter加上渐变来达到同样的效果。

问题是一旦应用了渐变过滤器，元素似乎没有收到任何悬停事件，因为没有使用悬停样式并且没有调用 javascript 事件。

关于在 IE 中使用渐变过滤器时如何接收悬停事件的任何想法？

这是应用于叠加元素的样式:

#foo {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    height: 400px;
    width: 400px;
    background-color: rgba(230, 250, 250, .25);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#40B0FAFA', endColorstr='#40B0FAFA')";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40B0FAFA', endColorstr='#40B0FAFA');
    zoom: 1;
}

#foo:hover {
    background-color: rgba(230, 250, 250, 1);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFB0FAFA', endColorstr='#FFB0FAFA')";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFB0FAFA', endColorstr='#FFB0FAFA');
}

Here is a simple example of the problem using jsFiddle.

Answer 1

您可以创建一个 JQuery 解决方法。

$('#foo').hover(function() {
 $(this).css('backgroundColor', 'rgba(230, 250, 250, 1)');
 //...
});