CSS/Javascript 鼠标悬停弹出框

CSS/Javascript Mouseover Popup box

提问by Kevin

I have table cell with a javascript/css content box that pops up upon mouseover.

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

There are 20 cells on the page. Everything is working correctly, in that when you mouseover the product link, you see the content box. However, I want to put a LINK inside the content box that the user can click on if they choose. So, the popup box has to stay up long enough for the user to mouseover to click the link.

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

Really, I want the OnMouseOver to stay open until either a second or two has gone by and/or the user OnMouseOver's another cell.

真的，我希望 OnMouseOver 保持打开状态，直到一两秒过去和/或用户 OnMouseOver 的另一个单元格。

The problem I'm having is that the pop up box doesn't stay open (due to OnMouseOut) to click the link. If I turn OnMouseOut off (which I tried), then all the pop up boxes just stay open, so this doesn't do the job either.

我遇到的问题是弹出框没有保持打开状态（由于 OnMouseOut）来单击链接。如果我关闭 OnMouseOut（我尝试过），那么所有弹出框都会保持打开状态，所以这也不起作用。

My CSS looks like this:

我的 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>

And the html:

和 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>

So, how can I make the pop up box stay open long enough to click on the link, but also make it disappear if another content box is activated?

那么，如何让弹出框保持打开足够长的时间以单击链接，但如果另一个内容框被激活，它又会消失？

Thanks in advance.

提前致谢。

采纳答案by dfsq

You have to improve your HTML markup for this task, need to get rid of inline event handlers:

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

Then you have to bind your events to all .NameHighlightsspans:

然后您必须将您的事件绑定到所有.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/

http://jsfiddle.net/3wyHJ/

So the idea is to use setTimeoutmethod.

所以想法是使用setTimeout方法。

Notes: I used querySelectorAllwhich is not supported by IE7, if you need to support it then you can use any of implementations of the getElementsByClassNamemethod.

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

回答by Michael Sobczak

In case anyone is looking for a jQuery version of the accepted answer:

如果有人正在寻找已接受答案的 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

js小提琴