CSS/Javascript Mouseover boîte de pop-up

J'ai cellule de tableau avec un javascript/css contenu de la boîte qui apparaît lors du passage de la souris.

Il y a 20 cellules sur la page. Tout fonctionne correctement, que lorsque vous passer la souris sur le lien du produit, vous voyez le contenu de la boîte. Cependant, je voudrais mettre un LIEN à l'intérieur de la boîte de contenu que l'utilisateur peut cliquer sur s'ils le souhaitent. Ainsi, la boîte de pop-up a rester en place assez longtemps pour que l'utilisateur du passage de la souris cliquer sur le lien.

Vraiment, je veux le OnMouseOver à rester ouvert jusqu'à ce qu'une seconde ou deux a passé, et/ou l'utilisateur OnMouseOver une autre cellule.

Le problème, je vais avoir, c'est que la fenêtre ne reste pas ouvrir en raison de leur OnMouseOut) cliquer sur le lien. Si je tourne OnMouseOut off (j'ai essayé), alors toutes les fenêtres juste de rester ouvert, de sorte que ce n'est pas faire le travail.

Mon CSS ressemble à ceci:

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

Et le code 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>

Alors, comment puis-je faire de la pop-up boîte de rester ouvert longtemps suffit de cliquer sur le lien, mais aussi de le faire disparaître si une autre boîte de contenu est activée?

Merci d'avance.

OriginalL'auteur Kevin | 2013-03-17

Vous avez à améliorer votre balisage HTML pour cette tâche, besoin de se débarrasser de inline gestionnaires d'événement:

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

Alors vous devez lier vos événements à tous les .NameHighlights travées:

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/

L'idée est donc d'utiliser setTimeout méthode.

Notes: j'ai utilisé querySelectorAll qui n'est pas pris en charge par IE7, si vous avez besoin de soutien, alors vous pouvez utiliser l'une des implémentations de la getElementsByClassName méthode.

Merci!!!!! Je vais donner à ceci un essai aujourd'hui....

OriginalL'auteur dfsq

Au cas où quelqu'un est à la recherche d'une version jQuery de la accepté de répondre:

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

OriginalL'auteur Michael Sobczak

Vous devez vous connecter pour publier un commentaire.