условие if-else с функцией зависания? - PullRequest
Новая
       12

условие if-else с функцией зависания?

2 голосов
/ 05 ноября 2010

Можно ли установить условие if-else с функцией наведения?Я хочу загрузить страницу рядом с текстовой ссылкой при наведении на нее, и я хочу иметь возможность навести курсор мыши на загруженный контент.Но этот загруженный контент будет удален в двух ситуациях:

  1. , когда мышь покинет загруженный контент
  2. , когда мышь покинет поле, содержащеетекстовая ссылка

, но у меня есть проблема с ситуацией номер 2 - если я применю функцию наведения на номер 2, номер 1 просто не произойдет.Загруженный контент удаляется сразу после того, как моя мышь покидает поле текстовой ссылки.

Итак, я подумываю поставить условие else-if в функцию hover, если это возможно (или любые другие более удачные идеи, если они у вас есть)Я хочу удалить загруженный контент, только если номер ситуации не возникает.Если я наложил курсор на загруженный контент, то не применяйте ситуацию № 2, пока моя мышь не покинет область загруженного контента.

Ниже приведен jQuery (для ситуации № 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>

1 Ответ

8 голосов
/ 05 ноября 2010

событие hover() может принимать другую функцию, которая вызывается, когда мышь уходит. 

$(".button").hover(
    function(e){ }, // over
    function(e){ }  // out
);

http://api.jquery.com/hover/

hover (handlerIn (eventObject), handlerOut (eventObject))
...