jquery - 当鼠标悬停时使工具栏出现

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

我想我得到了你的问题：

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

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

Answer 2

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

试试看

$(document).on("mouseover", '.fullscreen .fixed-toolbar', function(){
    $(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();
});