Question

我希望#first正常visibility:hidden，当鼠标悬停在鼠标外时，它会淡出。

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

    }
});

Answer 1

当要定义多个属性时，您应该使用地图设置它们。

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

更好的方法是将visibility: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');

     }
 });

<强> Check Fiddle

Answer 2

可能或可能不是您的问题，但我相信您需要更换以下内容：

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

和

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

需要成为：

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

和

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

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

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

在JQuery中使用'.css'的参考：https://api.jquery.com/css/

TL; DR：您不需要用逗号分隔属性和所需的值，而是需要使用冒号（:)，并且需要将.css部分括在{}

编辑：

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

#first {
  visibility:hidden;
}

在鼠标悬停时淡入内容并隐藏鼠标

2 个答案: