2010-11-05 3 views
1

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

  1. when the mouse leave the loaded content
  2. when the mouse leave the box that holds the text link

, но у меня есть проблема с ситуацией № 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> 
+0

сделал эту работу ?? – hunter

+0

привет благодарю за ответ. да, это так - после того, как я изменил свой css. так что мне не нужно полагаться на javascript :-) смотрите здесь в моей реализации http://rokhsanafiaz.co.uk/events спасибо! – laukok

ответ

6

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

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

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

парения (handlerIn (объектСобытия), handlerOut (объектСобытия))
Смежные вопросы