Question

131

CSS/Javascript Mouseover Popup box

rated 0 times [ 132] [ 1] / answers: 1 / hits: 25476 / 11 Years ago, sun, march 17, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

melinal

Add To Favorites

Follow

Total Points: 367

Total Questions: 101

Total Answers: 96

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

answered 11 Years ago karivictoriab · Accepted Answer

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.