Jquery 完整日历，天数上的悬停效果

我正在尝试使用FullCalendar版本3在天数上创建悬停效果。我想要的效果是这样的

问题是，在版本3中，每天的数据被分成两个表。第一个表是“日”框，而第二个表有“日数”和“事件”等信息

所以我想弄清楚是否有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>

明显的问题是，我需要一种方法将两个表单元格连接到一起

fc day

和

fc day top

fc day number

我想知道jQuery是否是更好的方法，如果是的话，我对它不是很了解，也不知道如何将它们联系在一起

更新

所以我使用jQuery“有点”实现了这一点。再仔细考虑一下，将这些单元格连接在一起的一件事是

数据日期

属性

然而，我想要的高光效果有点滞后，不像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，这使得悬停效果有效。下一个问题是如何使日历中的链接保持可点击状态。不管是谁，这是我到目前为止的代码：

$('.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) {

    }

---

问题：这不能单独用CSS来完成，因为

fc day number

不是

fc day

的子项

解决方案：您可以使用Jquery在mousein上添加包含悬停属性的类，并在mouseout上删除该类

CSS

JQuery

$('.fc-day').on('mousein', function() {
  $('.fc-day-number').addClass('on-hover');
}).on('mouseout', function() {
  $('.fc-day-number').removeClass('on-hover');
});

---

将

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;
}

$（函数（）{
var todayDate=moment（）.startOf（'day'）；
$（“#日历”）.fullCalendar({
});
});
.fc基本视图.fc日数.fc基本视图.fc周数{
填充：6px；
保证金：2倍；
最小宽度：19px；
文本对齐：居中；
}
.fc周.fc日顶部：悬停.fc日编号{
背景色：#ddd；
边界半径：50%；
颜色：#FFFFFF；
过渡：背景色0.2s；
}
好的，我已经完成了这项工作，所以我将发布答案。感谢这里的其他评论者给了我一些指导。虽然他们的答案没有得到我想要的结果，但这非常有帮助

因此，当单元格悬停时，我使用jQuery添加/删除一个类，并且当月份更改或视图更改时，我还必须对FullCalendar进行一些更改以使其工作。我是用
viewRender
完成的。因此，必须在FullCalendar jQuery中包含hover函数

$('#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');
          });
    }
  });

.fc day:hover.fc day number{不，不起作用，请参见我的答案，它提供了一个清洁器solution@RiotAct在我发布我的答案后，我会发布你的更新，但看看我的答案，我会帮助你解决问题issue@RiotAct看到我的更新…这是真的威德莱巴里；（我希望它能帮助你正确地找到它真的很难，因为构建它非常困难告诉我你是否需要帮助！我在这方面遇到了错误：Uncaught SyntaxError:missing）在参数列表之后，他们看看版本3是如何构建的，因为数字（日期）不是全部
td
的一部分，它在不同的表格中是的，我认为我的解决方案不是绝对正确的，但我给出了添加和删除一个类的想法。不过，我根据您的回答做了一点小小的更改，并没有添加和删除css，而是使用addClass和removeClass。他的目标是整天悬停，而不是悬停在num上我喜欢他附加在问题上的版本
 $('.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');
      });

.fc-event-hover{
 background: #ddd;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s ease;
}

$('#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');
          });
    }
  });