Jquery 使工具栏在鼠标悬停时显示

我有以下资料：

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

$（函数（）{
$（“.fullscreen toggle”）。toggle（
函数（）{
$（“正文”）.addClass（“全屏”）；
$（“.fullscreen toggle”）.wrap（“”）；
$（“.new_post.wysihtml5工具栏”）.wrap（“”）；
$（“.new_post.form actions”）.wrap（“”）；
$（this.children（“.toggle fullscreen”）.hide（）；
$（this.children（“.exit fullscreen”）.show（）；
},
函数（）{
$（“body”）.removeClass（“全屏”）；
$（“.new_post.fixed container”）.remove（）；
$（this.children（“.toggle fullscreen”）.show（）；
$（this.children（“.exit fullscreen”）.hide（）；
}
);
//后全屏窗体的淡入/淡出
$（'.fullscreen.fixed toolbar'）。打开（“鼠标悬停”，函数（）{
$（this.show（）；
});

HTML:

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

因此，当用户将鼠标放在工具栏上时，工具栏应该出现（我正在使用

on

，因为

.fullscreen.fixed toolbar

是通过jQuery动态添加的）。但是当我这样做时，什么也不会发生

我做错了什么

编辑：

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

---

我在一个链接中尝试了同样的操作，但它被触发。在悬停div时是否有不同的操作方式？

我认为您在上使用了错误的

试一下

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

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

要解决此问题，您可以使用CSS创建一个具有透明内容的div。
当计算
on（）
分配时，没有
。全屏。修复了工具栏
元素，因此不会发生任何事情。您可以尝试将其放置在
wrap（）
之后：

$（“.new_post.wysihtml5工具栏”）.wrap（“”）；
$（'.fullscreen.fixed toolbar'）。打开（“鼠标悬停”，函数（）{
$（this.show（）；
});
我想我明白了你的问题：

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

尝试此操作并查看是否有帮助。
是否隐藏了
。修复了工具栏的隐藏问题？如果隐藏了，则脚本将无法工作。尝试制作，对每个人都会更容易。您可以像那样使用
上的
，匿名函数明智；）
$（选择器）.on
将侦听器绑定到选择器匹配的所有元素，这与经典的
绑定
变体相同。
$（选择器）。on（事件，子选择器）
将live（！）侦听器绑定到与
选择器
下的
子选择器
匹配的所有元素。jquery网站本身的详细信息：