将<li>事件悬停在<div>内部


在里面。

我在我的一个非常老的项目中使用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 */
}

相关内容

  • 没有找到相关文章

最新更新