if-else-Bedingung mit hover-Funktion?

Kann ich if-else-Bedingung mit hover-Funktion? Ich möchte zum laden einer Seite neben dem text-link, wenn ich den Mauszeiger darüber schweben, und ich will in der Lage sein zu hover/mouseover auf den geladenen Inhalt. Aber diese geladenen Inhalten werden entfernt unter zwei Situationen:

  1. wenn die Maus lassen sich bei dem geladenen Inhalt
  2. wenn die Maus aus der box, hält den text-link

aber ich habe das problem mit der situation Nummer 2 - wenn ich die hover-Funktion auf die Nummer 2, die Nummer 1 einfach nicht passieren. Der geladene Inhalt wird sofort entfernt, wenn meine Maus, lassen Sie die text-link-box.

So, ich bin am überlegen zu stellen sonst-wenn-Bedingung, um die hover-Funktion, wenn möglich (oder eine andere bessere Ideen haben Sie?) Ich möchte zum entfernen der geladenen Inhalte nur dann, wenn die situation nicht auftreten. Wenn ich moused über, die auf den geladenen Inhalt, dann nicht gelten, situation, Nummer 2, bis meine Maus verlassen Sie den content-Bereich geladen.

Unten ist die jQuery (für die situation Nummer 1):

$(document).ready(function() {
    $(".button").hover(function(e){

        $('.wrapper-item-content').remove();

            var parent = $(this).parent();
            $(this).parent().addClass('current');


        var parent_top = parent.offset().top-180;
        var parent_left = parent.offset().left+80;

        $("body").append('<div class="wrapper-item-content"></div>');

        $(".wrapper-item-content").css({
            top: parent_top,
            left: parent_left,
            position: 'absolute',
            zIndex: '100',
            width: '350px',
            height: '100%',
            overflow: 'visible',
            border: '1px solid #000'
        });

        var path_url = $(this).attr('href');
        var path_file = $(this).attr('rel');
        var item_wrapper = $('.wrapper-item-content');

        var array_url = path_url.split('/');
        var pg_url = $(array_url).last()[0];

        item_wrapper.load(path_file+'?url='+pg_url, function(){

            item_wrapper.hover(function() {
                item_wrapper.addClass('mouseenter');
            },function(){
                item_wrapper.removeClass('mouseenter');
                parent.removeClass('current');
                item_wrapper.remove();
            });    

            parent.hover(function() {
                //something
            },function(){

                if(item_wrapper.hasClass('mouseenter'))
                {
                    //alert('has mouseenter');
                }
                else
                {
                    //alert('has no mouseenter');
                    //parent.removeClass('current');
                    //item_wrapper.remove();
                }
            });

        });

    },
    function(){

    });    
});

Html:

<div class="box"><a href="#" class="button" rel="content.php">Hover me</a></div>
hat das geklappt??
hi danke für die Antwort. ja, es funktioniert - nachdem ich meine geänderte css. so, ich habe nicht zu verlassen sich auf javascript 🙂 schau mal hier in meiner Implementierung rokhsanafiaz.co.uk/events vielen Dank!

InformationsquelleAutor laukok | 2010-11-05

Schreibe einen Kommentar