jQuery de pointage et de unhover

J'ai le code suivant:

    $('a.uiPopup').hover(function () {          
            $('.uiTip').show();
        },
        function () {
            $('.uiTip').remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });

De sorte que lorsque vous passez uiPopup puis uiTip s'affiche et puis quand vous unhover il disparaît à nouveau, MAIS si vous passez la souris sur la pointe, il mettrait un terme à la pointe de retirer et de le conserver sur l'écran jusqu'à ce que votre mouseleaves et puis l'enlever.

Ne fonctionne pas bien :/des idées? Merci

La .remove() est intentionnellement que dans mon script réel (ce qui est un extrait de montrer mon exemple) j'utilise de l'AJAX pour charger dans le .uiHelp et ils ont des identifiants uniques (encore une fois pas montré dans l'exemple ci-dessus comme au-delà de la portée de la question) tous fonctionne tout simplement pas le bit au sujet de l'arrêter lorsque l'utilisateur place le pointeur de la pointe elle-même!

EDIT: Pour ceux qui veulent voir l'intégralité du script et pourquoi je dois utiliser le hover:

$('a.uiPopup').hover(function () {
            $tip = '<div class="uiTip uiOverlayArrowLeft loading"><div class="uiOverlayContent"><!--content here --></div><i class="uiOverlayArrow"></i></div>';

            $newtip = $($tip).attr('id', 'organisationId-' + $(this).attr('id'));

            $($newtip).find('.uiOverlayContent').load(AppURL + 'Organisations/Manage/Tip', function () { $($newtip).removeClass('loading') });

            $('body').append($newtip);

            $location = $(this).offset(); $top = $location.top; $left = $location.left; $right = $location.right; $bottom = $location.bottom;

            $left = $left + $(this).width();
            $left = $left + 8;

            $top = $top - 10;

            $($newtip).css({
                'top': $top + 'px',
                'left': $left + 'px'
            });
        },
        function () {
            $id = "div#organisationId-" + $(this).attr('id');
            $($id).remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });
Ne devriez-vous pas être à l'aide de .hide() au lieu de .remove?
Pas parce que je veux retirer de la DOM!

OriginalL'auteur Cameron | 2011-10-05

  1. 7

    Bien, vous mentionnez uiTip dans un extrait de code et uiHelp dans un autre. Est le uiTip quelque part à l'intérieur de la uiHelp div? Si oui, le problème, c'est que votre souris laisse le lien pour obtenir sur le dessus de l'info-bulle div, et il est supprimé avant que votre souris est jamais considéré comme "au dessus" de la div.

    Voici une solution possible:

    $('a.uiPopup').hover(function () {
  $('.uiHelp').show();
}, function () {
  $('.uiHelp').data('timer', setTimeout(function () {
    $('.uiHelp').remove();
  }, 100));
});

$('div.uiHelp').live('mouseover', function () {
  if ($(this).data('timer')) {
    clearTimeout($(this).data('timer'));
  }
});

$('div.uiHelp').live('mouseleave', function () {
  $(this).remove();
});

    Cela donne à l'utilisateur un dixième de seconde pour obtenir à partir du lien sur la bulle d'aide, avant qu'il ne disparaisse. Vous pouvez ajuster le temps de l' setTimeout appel.

    Je vais laisser à vous de faire le tri uiTip/uiHelp - vous avez juste besoin d'un endroit pour stocker la référence à la minuterie.

    Parfait! 😉 Merci
    Juste sur une note de côté, dans les dernières versions de JQuery .live() est obsolète, vous devez utiliser .sur()

    OriginalL'auteur Elliot Nelson

  2. 1

    Peut-être cela va aider u

    $('a.uiPopup').hover(function () {          
    $('.uiHelp').show();
},function (e) {
    if(!$(e.target).parents('div.uiTip').length)
       $('.uiHelp').remove();
});
$('div.uiTip').live("mouseleave", function () {
    $(this).remove();
});
    Ne peut pas faire ce que j'ai besoin à la fois les fonctions de mon hover() voir ma mise à jour de l'OP par exemple de la vraie script
    afin de vérifier à nouveau peut-être une volonté aide 🙂

    OriginalL'auteur Sedat Başar

  3. 0

    vous devriez utilisé hide() au lieu de .remove(), puisque vous voulez le cacher et de ne pas supprimer la marque vers le haut à partir de la DOM.

    En fait je ne veux retirer de la DOM!
    Ah oui! désolé 🙂

    OriginalL'auteur Stryder