CSS/JavaScript鼠标悬停弹出框 [英] CSS/Javascript Mouseover Popup box

问题描述

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

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

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

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.

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

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.

我遇到的问题是，弹出框没有保持打开状态(由于OnMouseOut)，因此无法单击链接.如果我关闭了OnMouseOut(我尝试过)，则所有弹出框都保持打开状态，因此也无法完成这项工作.

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.

我的CSS看起来像这样:

My CSS looks like this:

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

那么，如何使弹出框保持打开状态足够长的时间以单击链接，但是如果激活了另一个内容框，该弹出框又会消失呢?

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?

谢谢.

推荐答案

您必须为此任务改进HTML标记，需要摆脱内联事件处理程序:

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

<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 跨度:

Then you have to bind your events to all .NameHighlights spans:

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 方法.

So the idea is to use setTimeout method.

注意事项:我使用了IE7不支持的 querySelectorAll ，如果您需要支持它，则可以使用 getElementsByClassName 的任何实现.code>方法.

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

这篇关于CSS/JavaScript鼠标悬停弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！