Как сделать что бы модальное окно исчезало после того как уводишь мышку в сторону?

Question

[LuidgiVamp]

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

Менял на <a href="#" onmouseover="show_full('{news-id}'); return false;" onmouseout="$('#show_full').remove();">Быстрый просмотр</a>

и вот на этот <a href="#" onmouseover="show_full('{news-id}'); return false;" onmouseout="$('#show_full').dialog('close');">Быстрый просмотр</a>

не работает

<script type="text/javascript">

function show_full(id) {
    $.ajax({
      type: "POST", 
      url: dle_root+"engine/ajax/show_full.php",
      data: "id="+id,
      dataType: "xml", 
      success: function(xml) { 
        
      jQuery(xml).find('site').each(
                  function()
                  {
          title = jQuery(this).find('title').text(),
                  desc = jQuery(this).find('des').text();
           rate = jQuery(this).find('rate').text();
        $('#show_full').remove();
        $('body').append("<div id=\"show_full\" style=\"overflow: auto;width:80%;\"></div>");
         			$('#show_full').html( desc);
              $('#show_full').dialog({
            zIndex: 900,
            width: $(window).width()*0.4,
            height: $(window).height()*0.8,
          buttons: [   {         text: "Закрыть",         click: function() { $(this).dialog("close"); }   }],                    close: function(event, ui) { $('#show_full').remove(); },
            	title: title,
            autoOpen: true
      });                  

                $('.ui-dialog-buttonset').html('<p align="left">'+rate+'</p>'); 
      
             });      

      }
      
    });
}

</script>

<a href="#" onmouseover="show_full('{news-id}'); return false;">Быстрый просмотр</a>

Поправочка вопроса вот такой вариант работает

<a href="#" onmouseover="show_full('{news-id}'); return false;" onmouseout="$('#show_full').dialog('close');"><i class="fa fa-info-circle"></i></a>

но окно исчезает сразу, нужно что бы можно было навести мышку на окошко и прочитать информацию или перейти по ссылке с этого окошка, а тут получается что мышку убираешь и оно сразу исчезает
да и еще при обертке для позиционирования окно просто мигает

<div class="mov-edit" title="Быстрый просмотр">
			<a href="#" onmouseover="show_full('{news-id}'); return false;" onmouseout="$('#show_full').dialog('close');"><i class="fa fa-info-circle"></i></a></div>

Answer 1

[Stalker_RED]

Слушайте событие mouseout на модалке.

Comments

[LuidgiVamp]

а как его слушать?

Answer 2

[MamaLuyba]

можешь через css повесить hover на родительский элемент.

#child {
display: none;
}

#parent:hover #child {
display: block;
}

и обернуть форму в родителя:

<div id='parent'>
 <div id='child'>Child</div>
</div>

Comments

[LuidgiVamp]

не такое не работает