javascript - 周突出显示在鼠标悬停时无法正常工作

Question

我在我的元素中使用了 fullCalendar。请看下面的 fiddle ，

jsfiddle

1) 第一列是周，其余列是天。

2) 在周列中，我显示了一些随机数。不考虑天数。

3) 当我将鼠标悬停在那个星期的数字上时，它会突出显示那个星期的星期五到下星期四(总共 7 天)。

我的期望是:

1) 当我将鼠标悬停在周“td”上时，它会显示一个工具提示。

2) 请检查 fiddle ，如果我在星期随机数上鼠标离开，它不会突出显示星期五到星期四。

3) 我的要求是，当我将鼠标悬停在随机数和特定的“td”上时，它应该突出显示星期五到星期四。当我的鼠标离开那个“td”时，我只需要隐藏那个突出显示。

var weekRandom;
	var dayRandom;
	
		var eventsArray = [ 
		];

		var dayNames = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday',
				'Thursday', 'Friday', 'Saturday' ];

		$('#calendar').fullCalendar(
				{
					editable : true,
					weekNumbers : true,
					allDaySlot : true,
					weekNumberTitle : 'week',
					eventLimit : true, // allow "more" link when too many events
					selectable : true,
					dayNamesShort : dayNames,
					eventLimit : 1,
					events : eventsArray,
					cc_monthPrev : 0,
					cc_monthNext : 2,

					columnFormat : {
						month : 'dddd', // Monday, Wednesday, etc
						week : 'dddd, MMM dS', // Monday 9/7
						day : 'dddd, MMM dS' // Monday 9/7
					},

					eventRender : function(event, element) {

						var html = "<div style='float:right'>" + 'welcome'
								+ "</div>" + "</div>";
						element.append(html);
					}

				});

		$("td.fc-day.fc-widget-content")
				.each(
						function(index) {
							var random = Math.floor(Math.random() * 100);
							dayRandom = $(this)
									.append(
											"</br><span style='font-size: 30px;font-weight: 600;color: green;'>"
													+ random
													+ "%</span></br><span>99,998</span><span>/</span><span style='font-weight:100'>99,999</span>");
						});
		$("td.fc-week-number.fc-widget-content").prepend(
				"<span class='weekFormat' style='float:left'>WK</span>");

		
		$("td.fc-week-number.fc-widget-content")
		.each(
				function(index) {
					var random = Math.floor(Math.random() * 100);
					weekRandom = $(this)
							.append(
									"<span class='weekNo' style='font-size: 20px;font-weight: 600;color: orange;'>"
											+ random
											+ "%</span>");
					
			});
		
		
		$("td.fc-week-number.fc-widget-content").find('.weekNo').each(function(){
			$(this).on('mouseover',function(){
				var weekNo = $(this).text();
				var weekNoCustm = weekNo.replace(/[^0-9]/g, "");
				console.log('weekNoCustm------'+weekNoCustm);
				if(weekNoCustm>0){
					$(this).parent('.fc-week-number ').siblings('.fc-fri').addClass('weekHilt');
					$(this).parent('.fc-week-number ').siblings('.fc-sat').addClass('weekHilt');
					$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').addClass('weekHilt');
					$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').addClass('weekHilt');
					$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').addClass('weekHilt');
					$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').addClass('weekHilt');
					$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').addClass('weekHilt'); 
					
				}
			})
			$(this).on('mouseleave',function(){
				$(this).parent('.fc-week-number ').siblings('.fc-fri').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').siblings('.fc-sat').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').removeClass('weekHilt');
				$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').removeClass('weekHilt');
			})
		});
		
		 
		
	 
						
		$(".fc-toolbar").css("display", "none");

		$(".fc-widget-content")
				.on(
						'mouseover',
						function() {

							$('#cal-info').addClass('hide');
							var data = $(this).html();
							var offset = $(this).offset();
							$('#cal-info').css('left', offset.left);
							$('#cal-info').css('top', (offset.top - 40));
							$('#cal-info')
									.html(
											'<span class="zoomBy">Zoom By:</span>'
													+ '</br></br>'
													+ '<a href="dayResort.html" id="utilizationResortId" target="_blank">Resort</a>'
													+ '</br>'
													+ '<a href="dayResort.html" id="utilizationBrandId" target="_blank">Brand</a>'
													+ '</br>'
													+ '<a href="dayResort.html" id="utilizationRepoId" target="_blank">Repository</a>'
													+ '</br>'
													+ '<a href="dayResort.html" id="utilizationConsumerId" target="_blank">Consumer Type</a>');

							//p.html( "left: " + offset.left + ", top: " + offset.top );
							$('#cal-info').removeClass('hide');
						});
		$(".fc-week-number").on('mouseover', function() {

			//$('#cal-info').addClass('hide');
		});
		$(".row").on('mouseleave', function() {

			$('#cal-info').addClass('hide');

		});

body {
	margin-top: 40px;
	text-align: center;
	font-size: 13px;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
.tag{
  background-color:grey;
  color:#fff;
  margin-left:0px;
  margin-top:8px !important;
  padding:3px;
  max-height:90px;
  overflow: visible;  
  position: fixed;
  z-index:999;
}
.tag:after {
  content: "";
  border-top: 16px solid red;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  bottom: -15px;
  left: calc(50% - 10px);
}

#calendar {
	width: 900px;
	margin: 0 auto;
}
.weekHilt{
	background: #1c90f3 !important;
}

Start Date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""> 
End date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br>

<div id='calendar'></div>
<div class="tag hide" id="cal-info">

请帮助我如何做到这一点..

Answer 1

这是否可以解决您的问题

$("#calendar").on("mouseover", "tr.fc-week", function() {
  $(this).addClass("active");
});
$("#calendar").on("mouseout", "tr.fc-week", function() {
  $("#calendar tr.fc-week").removeClass("active");
});

并添加这个 CSS:

tr.active > td:not(:first-child) {
   background-color: red;
}

fiddle :http://jsfiddle.net/8ohxvz2o/1/