CSS/Javascript Mouseover Popup box

Question

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

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.

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.

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.

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>

And the 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.

Answer 1

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>

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/

So the idea is to use setTimeout method.

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.