我在我的一个非常老的项目中使用AJAX控件工具包自动完成。我有一些问题,鼠标悬停突出显示。
在工作的示例中,生成的<li>
标记获得一个鼠标悬停事件,该事件使用内联css更改其背景颜色。工作得很好。但是,当我改变标记从:
<li>
Hello world
</li>
<li>
<div>Hello</div>
<div>world</div>
</li>
<li>
元素只会改变背景颜色,当我悬停在其中的一部分,而不是由一个div覆盖。
由于我不能修改生成(和缩小)的javascript,我正在寻找一个快速和肮脏的修复。
我尝试改变元素的z-index,没有成功。我也试图找到li的事件并将其添加到div中。但我找不到一种方法来复制未由jquery添加到另一个元素的事件。
这里的任何想法都非常感谢。
如果有任何帮助,请在下面返回最小化的javascript:
_highlightItem: function(item) {
/// <summary>
/// Highlights the specified item
/// </summary>
/// <param name="item" type="Sys.UI.DomElement" DomElement="true" mayBeNull="false" />
/// <returns />
var children = this._completionListElement.childNodes;
// Unselect any previously highlighted item
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child._highlighted) {
if (this._completionListItemCssClass) {
Sys.UI.DomElement.removeCssClass(child, this._highlightedItemCssClass);
Sys.UI.DomElement.addCssClass(child, this._completionListItemCssClass);
} else {
if (Sys.Browser.agent === Sys.Browser.Safari) {
child.style.backgroundColor = 'white';
child.style.color = 'black';
} else {
child.style.backgroundColor = this._textBackground;
child.style.color = this._textColor;
}
}
this.raiseItemOut(new AjaxControlToolkit.AutoCompleteItemEventArgs(child, child.firstChild.nodeValue, child._value));
}
}
// Highlight the new item
if(this._highlightedItemCssClass) {
Sys.UI.DomElement.removeCssClass(item, this._completionListItemCssClass);
Sys.UI.DomElement.addCssClass(item, this._highlightedItemCssClass);
} else {
if (Sys.Browser.agent === Sys.Browser.Safari) {
item.style.backgroundColor = 'lemonchiffon';
} else {
item.style.backgroundColor = 'highlight';
item.style.color = 'highlighttext';
}
}
item._highlighted = true;
this.raiseItemOver(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, item.firstChild.nodeValue, item._value));
},
为什么不使用CSS来添加需要的高亮呢?
li > div:hover {
/* Highlight Rule Here */
}