javascript - 鼠标悬停时内容淡入，鼠标移出时隐藏

Question

我希望#first 正常visibility:hidden 并且当鼠标悬停在它上面时淡入和在鼠标移开时它淡出。

编辑 fiddle :https://jsfiddle.net/vsdLk90s/1/

$("#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