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

Change font-size on mouse over, revert to original on mouse leave

本文关键字：字体 鼠标 离开 原始 恢复 悬停      更新时间：2023-09-26

我正在尝试编写一个函数，当鼠标进入元素时，它会更改元素的字体大小，当鼠标离开元素时，会将其恢复为原始字体大小

   $(".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);
    });

它会更改中鼠标的字体大小，但当鼠标离开时，它会保持相同的大小。(字体大小更改后，我做了一个警告(大小(，它保存了正确的值。(我在这里做错了什么？

使用CSS:可以轻松实现这一点

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

然而，在jquery中，您可以执行以下操作：

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

参见jsfiddle。注意，我从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 开始使用ems

据我所知，这将帮助您

$(".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%;
}

  $(".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);
});

您可以通过两种方式实现：

来自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;
}

$(".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;
 }
相关文章：