javascript - 鼠标悬停时更改字体大小，鼠标离开时恢复为原始字体大小

Question

我正在尝试编写一个函数，当鼠标进入元素时更改元素的字体大小，并在鼠标离开元素时将其恢复为原始字体大小。这就是我所拥有的:

   $(".month").hover(function(){

        var size = $(this).css("font-size");

        $(this).stop().animate({
            fontSize: start_font + font_off,
            opacity: '1'
        }, 200);    

    },function(){

        $(this).stop().animate({
            fontSize: size,
            opacity: '1'
        }, 200);
    });

鼠标移入时字体大小会改变，但鼠标离开时字体大小保持不变。 (我在字体大小更改后执行了警报(大小)，并且它保持了正确的值。)我在这里做错了什么？

Answer 1

您可以使用 CSS 轻松实现此目的:

.month:hover {
  font-size: 150%;
  }

但是，在 jquery 中你可以这样做:

$(".month").hover(function(){
  $(this).
    stop().
    animate({
      fontSize: "5em"
      }, 1000);
  },
  function(){
    $(this).
      stop().
      animate({
        fontSize: "1em"
        }, 1000);
    }
  );

See jsfiddle 。注意，我用过ems自 The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Source