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 Source

以来，我使用了

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：像

一样悬停

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

 }

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

5 个答案: