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

Hover style is not applied when using IE filter and element cannot be clicked

本文关键字：元素 单击 样式 悬停 筛选 IE 应用 使用      更新时间：2023-09-26

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

我能够让它在除IE7和IE8之外的所有浏览器中工作（我不在乎IE6）。

我的解决方案只是使用rgba使背景半透明，悬停样式会改变这种样式。当然，rgba在9之前的IE中不可用，所以我使用带梯度的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');
}

下面是一个使用jsFiddle的问题的简单示例。

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

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