我正在使用jquery-ui 1.9来获取jquery-autocomplete小部件。 我正在尝试使用蓝色和字体颜色更改背景颜色与列表项的白色,同时将鼠标悬停在jquery自动完成菜单项列表中。 通过添加css类,我可以在悬停列表项时更改背景颜色,还可以通过添加焦点功能在悬停列表项时更改字体颜色。
_focus: function (event, ui) {
event.preventDefault();
var htmlString= $('.ui-autocomplete').html();
//Recently unFocused Element
var foundUnFocusedEle = $(htmlString).find('.focusedElement');
if(foundUnFocusedEle.length != 0) {
var unFocusedEleId = $(foundUnFocusedEle).attr('id');
var unFocusedEleHtml = $('#'+unFocusedEleId).html();
if($(unFocusedEleHtml).hasClass('add-search-result-label')
&& $(unFocusedEleHtml).hasClass('add-search-result-sublabel')) {
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('hover-search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').addClass('search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('add-search-result-label');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('hover-search-result-sublabel');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').addClass('search-result-sublabel');
$('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('add-search-result-sublabel');
}
$('#'+unFocusedEleId).removeClass('focusedElement');
}
//ui-state-focus
var foundUiStateFocus = $(htmlString).find('.ui-state-focus');
//console.log(foundUiStateFocus);
if(foundUiStateFocus.hasClass('ui-state-focus')) {
//console.log('it has ui-state-focus');
var focusedEleId = $(foundUiStateFocus).attr('id');
//console.log('id: '+focusedEleId);
$('#'+focusedEleId).addClass('focusedElement');
var focusedEleHtml = $('#'+focusedEleId).html();
if($(focusedEleHtml).hasClass('search-result-label') && $(focusedEleHtml).hasClass('search-result-sublabel')) {
//console.log('it has search-result-label');
//console.log($('#'+(foundUiStateFocus).attr('id')).find('.search-result-label'));
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').addClass('add-search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').removeClass('search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').addClass('add-search-result-sublabel');
$('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').removeClass('search-result-sublabel');
$('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-label').addClass('hover-search-result-label');
$('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-sublabel').addClass('hover-search-result-sublabel');
}
}
}
现在当我将列表项目,字体颜色和背景颜色悬停时,但是当我从小部件中移出或移动到搜索文本框时。 我需要用原始颜色而不是白色来改变字体颜色。 所以我创建了mouseout / mouseleave函数,但它没有被调用。 任何人都可以告诉我当你将鼠标悬停在列表上然后从小部件中出来时,会调用哪个事件/函数。
答案 0 :(得分:0)
添加如下所示的委托处理程序对我有用。
$(document).on('mouseout', '.ui-autocomplete.ui-menu', function() {
console.log('trigget');
});