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

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

它改变了鼠标的字体大小，但是当鼠标离开时，它保持不变。 （我在更改字体大小后做了一个alert（size），它保持了正确的值。）我在这里做错什么了？

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. 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. 资源

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

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

.hoverout {

  font-size:50px;

 }