Всем привет.
Сегодня у меня для вас очередное решение «проблемы века»))
В одном из проектов я столкнулся с проблемой: на странице был инпут и если поставить в него курсор, чтобы он был активным, а потом навести мышь на меню, чтобы появился выпадающий блок, то через него был виден курсор мигающий в инпуте.
Баг был только в эксплорере и обуславливался тем, что инпут был расположен в коде ниже, чем меню и выпадающие блоки, поэтому z-index не срабатывал.
Немного подумав я написал небольшой js скрипт который и решил эту проблему.
<!--[if IE]>
<script type="text/javascript">
//fix IE bug - курсор в инпуте просвечивает через верхнее меню
$(document).ready(function(){
//переменная с нужным инпутом
var focused = $("input:focus").attr('id');
//при наведении курсора на меню убираем курсор из инпута
$('.menu div').hover(function(){
$('input').blur();
},
function(){ //а при отведении возвращаем инпуту фокус
$('#'+focused).focus();
});
});
</script>
<![endif]-->
Пример написан с использование jQuery, но его без проблем можно переделать на чистый js.
Код работает только в IE и не нагружаеет адекватные браузеры благодаря условным комментариям.
Надеюсь, что помог вам.
Интересная и полезная информация. Спасибо!