Стиль наведения не применяется при использовании фильтра IE и элемент не может быть нажат

Question

Я пытаюсь создать кликабельный оверлей, чтобы расположить его над произвольными частями страницы.Наложение в основном полупрозрачное, но имеет полностью непрозрачную часть, поэтому я не могу просто использовать свойство opacity.

Мне удалось заставить его работать во всех браузерах, кроме 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');
}

Вот простой пример проблемы с использованием jsFiddle.

Answer 1

Вы можете создать JQuery для работы.

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