当鼠标悬停时，会出现工具栏

Question

我有以下内容：

JS：

$(function() {
  $(".fullscreen-toggle").toggle( 
    function() {
      $("body").addClass("fullscreen");
      $(".fullscreen-toggle").wrap("<div class='fixed-container fixed-toggle' />");
      $(".new_post .wysihtml5-toolbar").wrap("<div class='fixed-container fixed-toolbar' />");
      $(".new_post .form-actions").wrap("<div class='fixed-container fixed-submit' />");
      $(this).children(".toggle-fullscreen").hide();
      $(this).children(".exit-fullscreen").show();
    },
    function() {
      $("body").removeClass("fullscreen");
      $(".new_post .fixed-container").remove();
      $(this).children(".toggle-fullscreen").show();
      $(this).children(".exit-fullscreen").hide();
    }
  );

  // Fade in/out for post fullscreen form
  $('.fullscreen .fixed-toolbar').on("mouseover", function(){
    $(this).show();
  });

HTML：

因此，当用户将鼠标放在工具栏上时，工具栏应该出现（我正在使用on，因为.fullscreen .fixed-toolbar是使用jQuery动态添加的。但是当我这样做时，没有任何事情发生。

我做错了什么？

修改

我在链接中尝试了同样的操作并触发了它。在盘旋div时有没有不同的方法呢？

Answer 1

我认为你以错误的方式使用on。

尝试

$(document).on("mouseover", '.fullscreen .fixed-toolbar', function(){
    $(this).show();
});

Answer 2

我想我得到了你的问题：

$(document).on("mouseover", ".fullscreen .fixed-toolbar", function(){
    $('ul[class$="toolbar"]', this).show();
});

试试这个，看看是否有帮助。

Answer 3

这不起作用，因为隐藏了应该接收mouseover事件的元素。

要解决此问题，您可以使用CSS创建具有透明内容的div。

Answer 4

评估on()作业时，没有.fullscreen .fixed-toolbar个元素，因此没有任何结果。您可以尝试将其放在wrap()：

之后

$(".new_post .wysihtml5-toolbar").wrap("<div class='fixed-container fixed-toolbar' />");
$('.fullscreen .fixed-toolbar').on("mouseover", function(){
    $(this).show();
});