javascript - CSS/Javascript 鼠标悬停弹出框

Question

我有一个带有 javascript/css 内容框的表格单元格，鼠标悬停时会弹出。

页面上有 20 个单元格。一切正常，因为当您将鼠标悬停在产品链接上时，您会看到内容框。但是，我想在内容框中放置一个 LINK，用户可以选择点击该链接。因此，弹出框必须保持足够长的时间，以便用户将鼠标悬停在鼠标上以单击链接。

真的，我希望 OnMouseOver 保持打开状态，直到一两秒过去和/或用户 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>

那么，我怎样才能让弹出框保持打开足够长的时间来点击链接，同时在另一个内容框被激活时让它消失呢？

提前致谢。

Answer 1

您必须为此任务改进您的 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>

然后你必须将你的事件绑定(bind)到所有.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方法。

注意:我使用了 querySelectorAll IE7 不支持它，如果你需要支持它，那么你可以使用 getElementsByClassName 的任何实现。方法。