jquerycssfont-size

jQuery CSS Font Size Not Working

I'm trying to use jQuery to increase the size of the font in a div while the mouse is over it. The script is loading correctly but the jQuery is doing nothing. Can anyone please tell me what is going wrong?

Html:

<body>
    <div id="A">C</div>
    <div id="B">o</div>
    <div id="C">l</div>
    <div id="D">o</div>
    <div id="E">r</div>
    <div id="F">M</div>
    <div id="G">e</div>
</body>

jQuery:

$("div").hover(function(){
    $(this).css("font-size", "100px");
});

CSS:

div{
  width: 100px;
  height: 100px;
  border-radius: 15px;  
  display: inline-block;
  font-size: 95px;
  font-family: 'Titan One';
}
Solution

  • Don't abuse jQuery like this. Use CSS.

    div:hover { font-size: 100px }