CSS/Javascript鼠标悬停弹出框

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

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

真的，我希望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>

.name突出显示{位置：相对；}
.NameHighlights div{display:none；}
.nameHighlightsPover{position:relative；}
.nameHighlightSpoor div{显示：块；位置：绝对；宽度：15em；顶部：1.3em；*顶部：20px；左侧：70px；z索引：1000；}

以及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>

#票数：123票

%喜欢

那么，我怎样才能使弹出框保持足够长的打开时间，以点击链接，但如果另一个内容框被激活，它也会消失

---

提前感谢。

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

因此，我们的想法是使用

setTimeout

方法

---

注意：我使用了IE7不支持的

querySelectorAll

，如果您需要支持它，那么您可以使用

getElementsByClassName

方法的任何实现。

如果有人在寻找接受答案的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');
            })
};

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');
            })
};