CSS/Javascript 鼠标悬停弹出框

Question

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

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

实际上，我希望鼠标悬停状态保持开启，直到经过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>

那么，我如何让弹出框保持足够长的时间以便单击链接，但如果激活另一个内容框，则使其消失呢？

提前感谢。

- Kevin

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>

然后，您需要将事件绑定到所有.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方法。

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

- dfsq

Answer 2

如果有人正在寻找已接受答案的jQuery版本：

var t;
$(function(){
            $('span.NameHighlights').mouseover(

                    function(e){
                        hideAll();
                        clearTimeout(t);
                        $(this).attr('class', 'NameHighlightsHover');

                    }
            ).mouseout(

                    function(e){

                        t = setTimeout(function() {
                        //$(this).attr('class', 'NameHighlights');
                        hideAll();
                        }, 300);

                    }
            );
        });

function hideAll() {
    $('span.NameHighlightsHover').each(function(index) {
            console.log('insde hideAll');
                $(this).attr('class', 'NameHighlights');
            })
};

jsFiddle

- Michael Sobczak