悬停并专注于JQuery自动完成项目

时间:2015-10-21 15:12:54

标签: jquery html css autocomplete

我正在构建一个带有特殊渲染菜单的JQuery autocomplete,一切正常。但我有悬停问题并专注于autocomplete项目,悬停在谷歌浏览器中可以正常工作,但它不在IE浏览器中。焦点在IE或谷歌浏览器中都不起作用。

这是我的CSS:

.ui-autocomplete  
{
    position: absolute; 
    width: 400px;
    height:150px;
    background-color:<%=Session("COR")%>;
    border: 2px solid #658DF2;
    overflow-y:scroll;
    overflow-x:hidden;
} 
.ui-menu-item table tr:hover td {
    background-color: #FEF693;
}

这是我的自动完成渲染菜单:

$(function() {
    $.ui.autocomplete.prototype._renderMenu = function(ul, items) {
        var self = this;
        ul.append("<table width=100% class='clsStd'><thead><tr><th width=15%>ID</th><th>Name</th></tr></thead><tbody></tbody></table>");
        $.each( items, function( index, item ) {
            self._renderItemData(ul, item );
        });
    };
    $.ui.autocomplete.prototype._renderItemData = function(ul, item) {
        return this._renderItem(ul, item ).data( "ui-autocomplete-item", item );
    };
    $.ui.autocomplete.prototype._renderItem = function(ul, item) {
        return $("<li class='ui-menu-item'></li>")
          .append( "<table width=100% class='clsStd' border='0' style='cursor:pointer;padding:0;'><tr><td width='15%'><a>"+item.value+"</a></td>"+"<td width='85%'><a>"+item.label+"</a></td></tr></table>" )
          .appendTo( ul );
    };
});

我试过这个:“.ui-menu-item table tr:hover td, .ui-menu-item table tr:focus td”但它看起来不太好!!

任何建议都非常感谢!!

0 个答案:

没有答案