Javascript 鼠标悬停时淡入内容，鼠标悬停时隐藏内容

我想要

#首先

正常地可见性：隐藏，当鼠标在上面时淡入淡出

编辑 小提琴：

---

当要定义多个特性时，应该使用映射来设置它们

.css({
   'opacity': '0',
   'visibility': 'hidden'
});

更好的方法是将一个具有

可见性的类：hidden

设置为

#first

，并根据条件切换类。。这句话里有些东西

 $("#one").on({
     mouseover: function () {
         timer = setTimeout(function () {
             $("#first").removeClass('hidden').css('opacity', '1');
         }, 400);
     },
     mouseout: function () {
         clearTimeout(timer);
         $("#first").css({
             'opacity': '0'
         }).addClass('hidden');

     }
 });

---

可能是您的问题，也可能不是您的问题，但我认为您需要替换以下行：

$("#first").css('opacity', '1');

及

需要成为：

$("#first").css({'opacity': '1'});

及

您可能还需要在将鼠标悬停在上方时“切换回”可见性，如下所示：

$("#first").css({'visibility': 'visible', 'opacity', '1'});

在JQuery中使用“.css”的参考：

TL；DR：您需要使用冒号（：）并将.css部分括在{}

编辑：

如果希望在页面加载时不显示div，则仅在将鼠标悬停在上方时显示，并将以下代码添加到样式表中：

#first {
  visibility:hidden;
}

---

啊，我明白了。当我第一次加载页面时，会显示图像，但在第一次将鼠标悬停在上面后，图像会正常运行。我应该先使用隐藏类吗？如果您不希望图像在页面加载时显示，并且只在鼠标悬停时显示；您可以将其定义为隐藏在“默认”css中（仅在普通样式表中），然后Jquery将在需要时覆盖它（在现有代码中完成），我明白了。当我第一次加载页面时，会显示图像，但在第一次将鼠标悬停在上面后，图像会正常运行。我应该先使用隐藏类吗？ReidWeb说，如果我在页面加载时隐藏了图像，Jquery将覆盖初始css，但它似乎不起作用。如果是这种情况，请不要使用内联样式。。根据类给出所有样式。那么你在处理特殊性方面就不会有任何问题了。对不起，我不太明白。我没有任何内联样式。这是最新的提琴。您需要定义一个新类

hidden

。然后将该类添加到元素

#one

。此外，由于此媒体查询

@仅媒体屏幕和（最大宽度：720px）.description wrap{display:none；}

您的div似乎被隐藏，因此事件不会触发。更新后请检查此项。

$("#first").css({'opacity': '0', 'visibility': 'hidden'});

$("#first").css({'visibility': 'visible', 'opacity', '1'});

#first {
  visibility:hidden;
}