Зачем кому-то хотеть навести курсор мыши на событие в выпадающем списке? Вот способ манипулирования IE8 для способа работы выпадающего списка:
Во-первых, давайте удостоверимся, что мы только передаем нашу функцию в IE8:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Затем, чтобы позволить селекту расширяться за пределы области содержимого, давайте обернем наши выпадающие списки в div с правильной структурой, если это еще не сделано, и затем вызовем вспомогательную функцию:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Теперь о событиях. Поскольку IE8 генерирует событие после фокусировки по любой причине, IE закрывает виджет после рендеринга при попытке расширения. Обходной путь будет заключаться в привязке к 'focusin' и 'focusout' классу, который будет автоматически расширяться на основе самого длинного текста опции. Затем, чтобы обеспечить постоянную минимальную ширину, которая не сжимается после значения по умолчанию, мы можем получить текущую ширину списка выбора и установить ее для свойства минимальной ширины выпадающего списка в 'onchange' переплет:
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Наконец, обязательно добавьте этот класс в таблицу стилей:
select:focus, select.expand {
width: auto;
}