Друзья, у меня очень трепетный вопрос, надеюсь на вашу помощь.
Есть календарик событий, когда в 1 день происходит несколько событий, при наведении на число это события всплывают в окошке а также сверху справа пишеться сколько событий за день (в нашем случае 1 июля).
Но проблема в том что при наведении на количество события - окошко тоже всплывает, и при дальнейшем движении на число закрываеться, так быть не должно.
Количество события в день вставляеться в
<span class="quantity_articles">' . $data->id . '</span>
.
Все сложено в 1 тег <td>. Прилагаю код php + jquery + скрин
Здесь происходит вывод числа календарика если событий за день больше 1.
print sprintf('<td class="event" align="center" style="color:white; background-image:url(../../img/calendar/draft-design-calendar278.jpg); background-repeat:no-repeat;background-position: center; background-size:30px;"><span class="quantity_articles">' . $data->id . '</span><div class="short_desc"></div>%d', $day);
А вот собственно и jquery который отвечает за обработку:
$('.event').mouseenter(function(){
var short_desc = 1;
var get_all = $(this).children('.get_all').text();
if(!$(this).children().first().next().next().hasClass('Holyday')) {
var field = $(this).children('.short_desc');
var cat = $(this).children().first().next().next().text();
var date = $(this).children('.date1').text();
$(this).children('.short_desc').css('opacity', '0.8');
$.post('ajax_calendar.php', {date:date, cat:cat, get_all:get_all, short_desc:short_desc}).done(function(data){
field.html(data);
field.stop(true,true).stop(true,true).show();
// field.css('opacity', '0.8');
// $('.short_desc').text('111111111111');
// $(this).html("<div style='position:absolute; z-index:999; border: 1px solid black'>11111</div>")
// alert(data);
});
}
})
$('.event').mouseout(function(){
$(this).children('.short_desc').stop(true,true).hide(300);
setTimeout(function(){
$('.short_desc').hide(300);
},1);
})
})
