我正在尝试使用FullCalendar版本3在日期数字上创建悬停效果。我想要的效果就像这一个here。
问题是，在版本3中，每天的数据分为2个表。第一个表是“日”框，而第二个表有“日期”和“事件”等信息。
所以我想弄清楚css是否有办法，如果没有，那么jQuery。以下是第一个表格的示例：
<div class="fc-bg">
<table class="">
<tbody>
<tr>
<td class="fc-day fc-widget-content fc-sun fc-past" data-date="2018-04-01"></td>
<td class="fc-day fc-widget-content fc-mon fc-past" data-date="2018-04-02"></td>
<td class="fc-day fc-widget-content fc-tue fc-past" data-date="2018-04-03"></td>
<td class="fc-day fc-widget-content fc-wed fc-past" data-date="2018-04-04"></td>
<td class="fc-day fc-widget-content fc-thu fc-past" data-date="2018-04-05"></td>
<td class="fc-day fc-widget-content fc-fri fc-past" data-date="2018-04-06"></td>
<td class="fc-day fc-widget-content fc-sat fc-past" data-date="2018-04-07"></td>
</tr>
</tbody>
</table>
</div>
这是第二张表的样本：
<div class="fc-content-skeleton">
<table>
<thead>
<tr>
<td class="fc-day-top fc-sun fc-past" data-date="2018-04-01">
<a class="fc-day-number" data-goto="{"date":"2018-04-01","type":"day"}">1</a>
</td>
<td class="fc-day-top fc-mon fc-past" data-date="2018-04-02">
<a class="fc-day-number" data-goto="{"date":"2018-04-02","type":"day"}">2</a>
</td>
<td class="fc-day-top fc-tue fc-past" data-date="2018-04-03">
<a class="fc-day-number" data-goto="{"date":"2018-04-03","type":"day"}">3</a>
</td>
<td class="fc-day-top fc-wed fc-past" data-date="2018-04-04">
<a class="fc-day-number" data-goto="{"date":"2018-04-04","type":"day"}">4</a>
</td>
<td class="fc-day-top fc-thu fc-past" data-date="2018-04-05">
<a class="fc-day-number" data-goto="{"date":"2018-04-05","type":"day"}">5</a>
</td>
<td class="fc-day-top fc-fri fc-past" data-date="2018-04-06">
<a class="fc-day-number" data-goto="{"date":"2018-04-06","type":"day"}">6</a></td>
<td class="fc-day-top fc-sat fc-past" data-date="2018-04-07">
<a class="fc-day-number" data-goto="{"date":"2018-04-07","type":"day"}">7</a>
</td>
</tr>
</thead>
</table>
</div>
我到目前为止尝试过的CSS：
.fc-day:hover ~ .fc-day-number {
background: #ddd;
border-radius: 50%;
color: #fff;
transition: background-color 0.2s ease;
}
显而易见的问题是，我需要一种方法将两个表格单元格绑定在一起fc-day和fc-day-top＆gt; fc-day-number。
我想知道jQuery是否是更好的方式，如果是的话，我对它不是很强大，也不确定如何将它们联系在一起。
更新
所以我“有点”使用jQuery工作。在考虑了一些之后，将这些单元格联系在一起的一件事就是data-date属性。
然而，我想要的亮点影响，就像CSS一样迟钝而不顺畅。也许有人可以帮我清理一下或提高效率？
$('.fc-day').hover(function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').css({'background-color': 'yellow'});
}, function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').css({'background-color':'transparent'})
});
更新2
所以我得到了这个工作，并在评论中的一些人的帮助下，我改变了通过jQuery添加CSS而不是添加/删除类。我还发现FullCalendar的默认CSS将fc-bg类设置为z-index为1.这会导致一个问题，因为只有当鼠标位于没有任何重叠的网格的一部分时，悬停效果才有效它。所以我现在已经将z-index更改为5，这使得悬停效果起作用。下一个问题是弄清楚如何使日历中的链接保持可点击此更改。 Anywho，这是我到目前为止的代码：
$('.fc-day').hover(function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
}, function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
});
更新3
新的发展。当日历更改为另一个月或不同类型的视图时，除非刷新页面，否则创建悬停效果的jQuery函数将不再有效。进一步搜索后，可以从FullCalendar viewRender调用一种方法。我怎么能把我的功能挂钩呢？
viewRender: function (element) {
}
答案 0 :(得分：0)
问题：由于fc-day-number不是fc-day的孩子，因此无法单独使用CSS。
解决方案：您可以使用Jquery在mousein上添加包含悬停属性的类，并在mouseout上删除该类。
CSS
.on-hover {
background: #ddd;
border-radius: 50%;
color: #fff;
transition: background-color 0.2s ease;
}
JQuery的
$('.fc-day').on('mousein', function() {
$('.fc-day-number').addClass('on-hover');
}).on('mouseout', function() {
$('.fc-day-number').removeClass('on-hover');
});
答案 1 :(得分：0)
在mouseenter和mouseleave到第
$('.fc-day.fc-widget-content').mouseenter(function() {
var date=this.dataset.date;
var day=$('.fc-day-top.fc-past').filter(function(){return this.dataset.date===date}).children()
day.addClass('fc-event-hover');
});
$('.fc-day.fc-widget-content').mouseleave(function() {
var date=this.dataset.date;
var day=$('.fc-day-top.fc-past').filter(function(){return this.dataset.date===date}).children()
day.removeClass('fc-event-hover');
});
<强> CSS：
.fc-event-hover{
background: #ddd;
border-radius: 50%;
color: #fff;
transition: background-color 0.2s ease;
}
答案 2 :(得分：0)
$(function() {
var todayDate = moment().startOf('day');
$('#calendar').fullCalendar({
});
});.fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
padding: 6px;
margin: 2px;
min-width:19px;
text-align: center;
}
.fc-week .fc-day-top:hover .fc-day-number{
background-color: #ddd;
border-radius: 50% ;
color: #FFFFFF ;
transition: background-color 0.2s ;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id='calendar'></div>
答案 3 :(得分：0)
好的，所以我得到了这个工作，所以我只是发布答案。感谢其他评论者给我一些指导。虽然他们的答案没有得到我想要的结果，但它非常有帮助。
因此，当一个单元格悬停时，我使用jQuery添加/删除一个类，并且当一个月被更改或视图被更改时，还必须进行一些更改以使其与FullCalendar一起使用。我用viewRender做了这个。所以悬停函数必须包含在FullCalendar jQuery中。
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next'
},
defaultView: 'month',
views: {
month: { // name of view
columnHeaderFormat: 'ddd', // Mon
},
},
navLinks: true,
height: 'parent',
events: 'https://fullcalendar.io/demo-events.json',
viewRender: function (element) {
$('.fc-day, .fc-day-top').hover(function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
}, function() {
var myEm = $(this).attr('data-date');
$('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
});
}
});