Question

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

我能够在除IE 7和8之外的所有浏览器中使用它（我不关心IE 6）。

我的解决方案只是使用rgba使背景半透明，悬停样式改变了这种风格。当然，在9之前的IE中没有rgba，所以我使用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)');
 //...
});

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

1 个答案: