How to temporarily enlarge font size on hover using jQuery

Question

Hi There Just Ran Into A Small Problem i have a column with text in it and i have evoked some code that makes the font of the text get bigger when hovering over the column

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

});

but how do i get the font to return back to the original size.

I hope this is not a stupid question You guys.

Honestly i have spent a miserable 12 minutes looking through past threads about the issue i am going through Thanks.

Sorry If it is a dumb one

Answer 1

Use CSS instead, and spare yourself the javascript headache:

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

If on the other hand you want to enlarge ALL p s within the container, when hovering over the container itself , you could place the the :hover on the container, like so:

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

Note the ever so subtle difference!

Meanwhile, in javascript, make sure the javascript is inactive while you test it out:

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

Answer 2

This seems to work and I have a fiddle below to prove it.. any questions?

 $(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 if you want to change the size of the p specifically .

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

Answer 3

To change the font-size you gotta use "font-size". Have a look in below js code

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