Друзья, подскажите в чём может быть дело.
Задача вообще стоит абсолютно тривиальная - поменять цвет бордера у блока по наведению и вернуть его обратно по отведению мышки. Но должен быть бордер-радиус.
Для ie подключил PIE.htc, и прописал смену цвета через css по событию hover. Но тут случился первый подводный камень - при ховере ie не хочет подключать PIE.htc и углы становятся квадратными.
Не нагуглив решение проблемы минут за 30-40 решил написать простенький скрипт
$('.for-hover').hover(function(){
cl = $(this).css('border-top-color');
$(this).css('border-color','#D41A44');
}, function(){
$(this).css('border-color',cl);
});
Сработало везде, кроме ie8 (ie10 проглатил без возмущений).
После пары экспериментов выяснилось, что ie на запрос border-color отвечает "transparent". То есть следующий код выдает окошко с надписью "transparent"
$('.for-hover').hover(function(){
cl = $(this).css('border-top-color');
alert(cl);
$(this).css('border-color','#D41A44');
}, function(){
$(this).css('border-color',cl);
});
Господа, прошу помощи, в чём может быть проблема?
В контексте данного скрипта перепробовал все варианты - запрос значения border, border-color, borderColor, border-top-color. Пробовал задать значение в css через hex и rgb(), в том числе для каждой стороны отдельно.
Кстати я просмотриваю через ie10 в режиме совместимости с ie8, может ли быть проблема в этом?