Javascript 在fullcalendar.js中的事件上添加悬停div

我在我的项目中使用了fullcalendar.js，我想做的是在该div中任何事件的悬停处显示一个div，我有三个操作按钮编辑、查看、删除让我向您展示我的代码

HTML

 <div id="calendar"/>

JavaScript/Jquery

<script>
      $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                eventMouseover: function(event, jsEvent, view) {
                    $template="<div class='hover-div clearfix' id='event_"+event.id+"'>"+
                        "<div class='display-inline-block'>"+
                        "<i class='fas fa-pencil-alt'></i>"+
                        "<a class='edit-calender common-font-properties'>Edit</a>"+
                        "</div>"+
                        "<div class='display-inline-block'>"+
                        "<i class='fas fa-eye'></i>"+
                        "<a class='edit-calender common-font-properties'>View</a>"+
                        "</div>"+
                        "<div class='display-inline-block'>"+
                        " <i class='fas fa-trash'></i>"+
                        " <a class='edit-calender common-font-properties'>Delete</a>"+
                        " </div>"+
                        "</div>";

                                       //$('.fc-content .fc-title', this).wrapAll("<div class='wrapall'><div>");
//                    $('.fc-content .wrapall', this).prepend($template);
                    $('.fc-content', this).prepend($template);
                },

                eventMouseout: function(event, jsEvent, view) {
                    //$('#event_'+event.id).remove();
                },
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [

                    {
                        id: 7,
                        title: 'Lunch',
                        start: '2018-08-12T12:00:00'
                    },
                    {
                        id: 8,
                        title: 'Meeting',
                        start: '2018-08-13T14:30:00'
                    },
                    {
                        id: 9,
                        title: 'Happy Hour',
                        start: '2018-08-14T17:30:00'
                    },
                    {
                        id: 10,
                        title: 'Dinner',
                        start: '2018-08-15T20:00:00'
                    },
                    {
                        id: 11,
                        title: 'Birthday Party',
                        start: '2018-08-16T07:00:00'
                    },
                    {
                        id: 12,
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2018-03-28'
                    }
                ]
            });
  </script>

$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月、agendaWeek、agendaDay、listWeek”
},
eventMouseover：函数（事件、jsEvent、视图）{
$template=“”+
""+
""+
"

我面临的问题相当简单，我正在创建的悬停div位于盒子的背面，它在较小的屏幕上不完全可见。所有内容都隐藏了，我尝试了十几种方法尝试z-index等，但我仍然无法增加z-index或使我的div可见。有什么帮助吗？
您当前的标记这不起作用，子项的z索引不能大于父项，它被设置为相同的堆叠索引。您必须将鼠标悬停div置于日历标记之外，并将其正确定位

虽然您当然可以自己编写，但实现它的最简单方法是使用库

查看Fullcalendar，它使用引导popover功能。打开开发工具并将鼠标悬停在某个事件上，您将看到工具提示的标记添加到了日历下方。如果您尚未使用引导，另一个替代方法将是jQuery插件，您将使用它作为FC依赖项是的

使用qTip2的示例：

$("#calendar").fullCalendar({
  defaultView: "basicWeek",
  defaultDate: "2018-04-07",
  resources: [
    { id: "a", title: "Room A" },
    { id: "b", title: "Room B", eventColor: "green" },
    { id: "c", title: "Room C", eventColor: "orange" },
    { id: "d", title: "Room D", eventColor: "red" }
  ],
  events: [
    {
      id: "1",
      resourceId: "a",
      start: "2018-04-06",
      end: "2018-04-08",
      title: "event 1"
    },
    {
      id: "2",
      resourceId: "a",
      start: "2018-04-07T09:00:00",
      end: "2018-04-07T14:00:00",
      title: "event 2"
    },
    {
      id: "3",
      resourceId: "b",
      start: "2018-04-07T12:00:00",
      end: "2018-04-08T06:00:00",
      title: "event 3"
    },
    {
      id: "4",
      resourceId: "c",
      start: "2018-04-07T07:30:00",
      end: "2018-04-07T09:30:00",
      title: "event 4"
    },
    {
      id: "5",
      resourceId: "d",
      start: "2018-04-07T10:00:00",
      end: "2018-04-07T15:00:00",
      title: "event 5"
    }
  ],
  eventRender: function(event, element) {
    element.qtip({
      content: {
        title: { text: event.title },
        text:
          '<span class="title">Start: </span>' +
          $.fullCalendar.formatDate(event.start, "hh:mmtt") +
          '<br><span class="title">Description: </span>' +
          event.description
      },
      hide: {
        delay: 200,
        fixed: true
      },
      position: {
        target: "mouse", // Use the mouse position as the position origin
        adjust: {
          // Don't continuously  the mouse, just use initial position
          mouse: false
        }
      }
    });
  }
});

$（“#日历”）.fullCalendar({
defaultView:“basicWeek”，
违约日期：“2018-04-07”，
资源：[
{id:“a”，标题：“a室”}，
{id:“b”，标题：“b室”，eventColor:“绿色”}，
{id:“c”，标题：“c室”，事件颜色：“橙色”}，
{id:“d”，标题：“d室”，事件颜色：“红色”}
],
活动：[
{
id:“1”，
资源ID:“a”，
开始：“2018-04-06”，
完：“2018-04-08”，
标题：“事件1”
},
{
id:“2”，
资源ID:“a”，
开始：“2018-04-07T09:00:00”，
完：“2018-04-07T14:00:00”，
标题：“活动2”
},
{
id:“3”，
资源ID：“b”，
开始：“2018-04-07T12:00:00”，
完：“2018-04-08T06:00:00”，
标题：“事件3”
},
{
id:“4”，
资源ID:“c”，
开始：“2018-04-07T07:30:00”，
完：“2018-04-07T09:30:00”，
标题：“事件4”
},
{
id:“5”，
资源ID：“d”，
开始：“2018-04-07T10:00:00”，
完：“2018-04-07T15:00:00”，
标题：“活动5”
}
],
eventRender:函数（事件，元素）{
元素qtip({
内容：{
标题：{text:event.title}，
正文：
'开始：'+
$.fullCalendar.formatDate（event.start，“hh:mmtt”）+
“
说明：”+
event.description
},
隐藏：{
延误：200，
修正：正确
},
职位：{
目标：“鼠标”//使用鼠标位置作为位置原点
调整：{
//不要连续移动鼠标，只需使用初始位置
老鼠：错
}
}
});
}
});

使用qTip2演示。
您可能应该确保了解如何拼写日历，因为您似乎有一半的时间使用了不正确的拼写。这可能与此无关，但在某个时候它会引入一大堆错误，特别是在对所说的单词使用库时。@Roope我很抱歉！我遇到了chan谢谢你，你说的话很有道理我的问题是我要显示的悬停div有按钮和动作，它们将被执行，所以我需要一些悬停div，当它悬停时保持在原来的位置，当光标移动时消失r离开这个区域，就像一个标准的悬停div一样，我看到这个qtip看起来不错，但它只给我留下了一个问题，我需要一些悬停的东西，这样我就可以点击按钮。你有qtip中的代码示例吗？我在qtip中看到了示例，但它们没有显示源代码，例如带有关闭按钮的工具提示。如果你只是lo为了让它保持打开状态，以便您单击其中一个操作按钮，上面的演示应该允许您实现这一点。您只需将内容与标记交换即可。只要鼠标在工具提示上，工具提示就会打开并保持打开状态，然后在鼠标移出时自动关闭。