Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Всплытие окна через DOM при mouseenter (https://javascript.ru/forum/misc/54912-vsplytie-okna-cherez-dom-pri-mouseenter.html)

tegs89 06.04.2015 13:01

Всплытие окна через DOM при mouseenter
 
Вложений: 1
Друзья, у меня очень трепетный вопрос, надеюсь на вашу помощь.

Есть календарик событий, когда в 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);
	})

})

laimas 06.04.2015 13:45

Покажите html код одной ячейки таблицы, а не кусочек его, ибо $(this).children().first().next().next().text() нечто невразумительное, как впрочем и остальное.

tegs89 06.04.2015 13:55

Вложений: 1
Добавил скрин

laimas 06.04.2015 14:00

Скрин, это не код, а картинка, или вы предлагаете вам отвечающим с вашей картинки код переписывать?


Часовой пояс GMT +3, время: 11:51.