JQuery hover использует непрозрачность, которую IE не поддерживает - PullRequest
Новая
       0

JQuery hover использует непрозрачность, которую IE не поддерживает

0 голосов
/ 11 января 2011

Ниже мой код для использования на этой странице: здесь 

$(document).ready(function(){
$('.jcarousel-skin-tango a').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);

        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);

        }
    )
});

Проблема заключается в IE 8 и ниже. Когда вы наводите курсор мыши на любое из изображений слайдов, наведение становится черным (потому что IE не поддерживает «прозрачность») Мне в основном нужен новый способ написания этого, чтобы тот же эффект был достигнут без появления серого / черного ящика в IE. Есть идеи?

Ответы [ 5 ]

8 голосов
/ 11 января 2011

IE не очень хорошо поддерживает прозрачность CSS. Используйте следующее, чтобы прозрачность работала в IE:

Этот код позволяет (например) установить все изображения с классом: foo, чтобы использовать непрозрачность: 50. 

$('img.foo').css("-ms-filter", "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

Вы можете попробовать инициализировать элемент с помощью visibility:hidden;, а затем сделать его видимым и исчезнуть при его активации. Эффект jQuery fade будет работать с браузером, который его поддерживает, и просто отображает элемент, если fade не поддерживается должным образом.

Кроме того, вы можете рассмотреть возможность запуска bling только один раз для каждого элемента, это ускорит обработку jQuery: e.g.:

var $el = $(this);
var $rollover = $el.find('.rollover'),
    $captions = $el.find('.captions');

Выбор идентификатора всегда самый быстрый, за которым следуют имена тегов (a, ul, div). Выбор классов CSS выполняется медленнее.

4 голосов
/ 19 января 2011

Я думаю, что вы используете прозрачные изображения PNG. это не проблема непрозрачности. Вы должны использовать альфа-загрузчик изображений, т. е. он будет работать. если ваше изображение установлено как фон из CSS, хак будет ниже 

.rollover {
    background: url(/image_path.png) no-repeat 0 0;
    /* IE hack, targets ie only */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/image_path.png", sizingMethod="crop");  
}

или вы можете использовать решение javascript для pngfix на лету с javascript, http://www.dillerdesign.com/experiment/DD_belatedPNG/

DD_belatedPNG.fixPng('.rollover');
1 голос
/ 22 января 2011

Это не про прозрачные pngs.У меня была похожая проблема.Просто установите цвет фона для элемента непосредственно перед переходом (и вы можете удалить его сразу после).

1 голос
/ 19 января 2011

AFAIK, нет способа справиться с проблемой IE, по крайней мере, в вашем случае.Internet Explorer плохо работает с изменениями непрозрачности javascript / jQuery (обычно альфа-смешение, show (); функция включена), , особенно при использовании (полупрозрачных) изображений .IE не может понять исчезновение альфа-смешанного элемента.

Мое предложение: используйте функции slideDown / slideUp / other или .animate в свойствах элемента, чтобы получить наиболее близкий эффект без использования альфа-смешивания.

удачи.

0 голосов
/ 19 января 2011

Вы также используете полупрозрачный PNG?Это еще больше усложняет ситуацию.Я бы изменил это на gif для значка + и просто цвет фона для «коробки», которая исчезает и исчезает.Попробуйте сначала, а затем попытайтесь решить это с PNG позже.У меня была та же проблема, но ее легче решить, если идти к ней шаг за шагом.

...