2

私は、私の非常に古いプロジェクトでAJAXコントロールツールキットのオートコンプリートを使用しています。マウスオーバーの強調表示に問題があります。

動作する例では、生成された<li>タグは、インラインcssを使用して背景色を変更するマウスオーバーイベントを取得します。うまく機能します。ただし、マークアップを次のように変更すると、次のようになります。

<li>
    Hello world
</li>

に

<li>
    <div>Hello</div>
    <div>world</div>
</li>

要素は、divの<li>1つでカバーされていない部分にカーソルを合わせた場合にのみ背景色を変更します。

生成された（そして縮小された）javasacriptを変更できないので、迅速で汚い修正を探しています。

要素の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));   
},
4

1 に答える 1

4

CSSを使用して必要なハイライトを追加してみませんか？

li > div:hover {
  /* Highlight Rule Here */
}
于 2013-03-06T16:36:38.303 に答える