如何使用jQuery临时放大悬停字体大小

How to temporarily enlarge font size on hover using jQuery

本文关键字：悬停 字体 放大 何使用 jQuery      更新时间：2023-09-26

你好，刚才遇到了一个小问题我有一个列的文本，我已经唤起了一些代码，使文本的字体变得更大时，悬停在列

$("#column3").hover(function(){
    $("p").css("fontSize", "30px");
});

但是我如何让字体恢复到原来的大小。

我希望这不是一个愚蠢的问题。

老实说，我花了悲惨的12分钟看过去的线程关于我正在经历的问题，谢谢。

对不起，如果这是一个愚蠢的

用CSS代替，省却javascript的麻烦:

<style>
    #column3 p {font-size: 10px}
    #column3 p:hover {font-size: 30px}
</style>

另一方面，如果您想要放大容器内的所有p，当将鼠标悬停在容器本身时，您可以将:hover放置在容器上，如下所示:

<style>
    #column3 p {font-size: 10px}
    #column3:hover p {font-size: 30px}
</style>

注意这细微的差别!

同时，在javascript中，确保javascript在测试时处于非活动状态:

<script>
    /*
    $("#column3").hover(function(){
        $("p").css("fontSize", "30px");
    });
    */
</script>

这似乎是有效的，我有一个小提琴下面来证明它。有什么问题吗?

 $(document).ready( function(){
        var size = $("#column3").css("fontSize");
        $("#column3").hover(
                function(){
                    $(this).css("fontSize", "30px");
                }, 
                function(){
                    $(this).css("fontSize", size);
                }
         );
});
HTML 

<div id="column3">test</div>
http://jsfiddle.net/Lbxsf2t0/

EDIT如果你想改变p的大小。

      var size = $("#column3").css("fontSize");
        $("#column3").hover(
            function(){
                $(this).find("p").css("fontSize", "30px");
                }, 
            function(){
                $(this).find("p").css("fontSize", size);
            }
        );

要更改字体大小，必须使用"font-size"。看看下面的js代码

$("#column3").hover(function(){
  $('p').css("font-size","30px");
});
相关文章：