5

マウスオーバー時にポップアップする javascript/css コンテンツ ボックスを含むテーブル セルがあります。

ページには 20 個のセルがあります。製品リンクにマウスを合わせると、コンテンツ ボックスが表示されるという点で、すべてが正常に機能しています。ただし、ユーザーが選択した場合にクリックできるコンテンツ ボックス内に LINK を配置したいと考えています。そのため、ポップアップ ボックスは、ユーザーがマウスオーバーしてリンクをクリックするのに十分な時間、表示されたままにする必要があります。

本当に、OnMouseOver が 1 秒か 2 秒経過するまで、および/またはユーザー OnMouseOver の別のセルまで開いたままにしておきたいのです。

私が抱えている問題は、(OnMouseOut が原因で) リンクをクリックするポップアップ ボックスが開いたままにならないことです。OnMouseOut をオフにすると (私が試しました)、すべてのポップアップ ボックスが開いたままになるため、これも機能しません。

私のCSSは次のようになります。

<style type="text/css" title="">
    .NameHighlights         {position:relative; }
    .NameHighlights div     {display: none;}
    .NameHighlightsHover    {position:relative;}
    .NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;}
</style>

そしてhtml：

<td>
    <span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'">
    <a href="product link is here">Product 1</a>
           <div>
            # of Votes:  123<br>
            % Liked<br>
            <a href="product review link>See User reviews</a>
            </div>
    </span>
</td>

では、リンクをクリックするのに十分な時間ポップアップ ボックスを開いたままにし、別のコンテンツ ボックスがアクティブ化された場合にポップアップ ボックスを非表示にするにはどうすればよいでしょうか?

前もって感謝します。

4

2 に答える 2

4

このタスクのために HTML マークアップを改善する必要があり、インライン イベント ハンドラを取り除く必要があります。

<span class="NameHighlights">
    <a href="product link is here">Product 1</a>
    <div>
        # of Votes:  123<br>
        % Liked<br>
        <a href="product review link">See User reviews</a>
    </div>
</span>

次に、イベントをすべての.NameHighlightsスパンにバインドする必要があります。

var span = document.querySelectorAll('.NameHighlights');
for (var i = span.length; i--;) {
    (function () {
        var t;
        span[i].onmouseover = function () {
            hideAll();
            clearTimeout(t);
            this.className = 'NameHighlightsHover';
        };
        span[i].onmouseout = function () {
            var self = this;
            t = setTimeout(function () {
                self.className = 'NameHighlights';
            }, 300);
        };
    })();
}

http://jsfiddle.net/3wyHJ/

したがって、アイデアはsetTimeoutメソッドを使用することです。

注: querySelectorAllIE7 でサポートされていないものを使用しました。サポートする必要がある場合は、getElementsByClassNameメソッドの実装のいずれかを使用できます。

于 2013-03-17T06:14:36.477 に答える