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

见 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开始使用

Answer 2

据我了解，这将对您有所帮助

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

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

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

},function(){
    var size = $(this).css("font-size");      //Add this
    $(this).stop().animate({
        fontSize: size - font_off,   
        opacity: '1'
    }, 200);
});

或者通过css你可以用 :hover like

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

Answer 3

  $(".month").hover(function(){
    var size = $(this).css("font-size");
    alert(size); 
   $(this).stop().animate({
        fontSize: start_font + font_off,
        opacity: '1'
    }, 200);    

},function(){

    $(this).stop().animate({
        fontSize: size,//In this line u r getting error as size not defined 
        opacity: '1'
    }, 200);
    alert('leaving '+size);
});

Answer 4

你可以通过两种方式做到这一点：

从 Jquery 动画功能：

$('#my-list li').hover(function() {
      $(this).stop().animate({ fontSize : '20px' });
},
function() {
      $(this).stop().animate({ fontSize : '12px' });
});

并且来自 CSS

a{
    font-size:16px;
}

a:hover {
    font-size:18px;
}

Answer 5

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

 if($('#month').hasClass('hoverout')){

   $(this).removeClass("hoverout");
 }

   $(this).addClass("hoverin");
   $(this).stop().animate({
        opacity: '1'
    }, 200);    

},function(){

     if($('#month').hasClass('hoverin')){

            $(this).removeClass("hoverin");
      }

     $(this).addClass("hoverout");

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

});

css

.hoverin{

   font-size:20px;
}

.悬停{

  font-size:50px;

 }