jQuery CSS Font Size Not Working

Question

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';
}

ur jquery seems to be work fine .. but if u set css font size 95px and in jquery 100 px its a little diffrence so u can't diffranciate — Anant Dabhi
– Anant Dabhi, Commented Mar 22, 2014 at 6:32

bjb568 · Accepted Answer · 2014-03-22 06:34:07Z

7

Don't abuse jQuery like this. Use CSS.

div:hover { font-size: 100px }

answered Mar 22, 2014 at 6:34

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m-sarabi · Accepted Answer · 2024-09-24 00:52:46Z

4

I agree with @BJB568. You might be looking for this:

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

edited Sep 24, 2024 at 0:52

m-sarabi

2,3101 gold badge18 silver badges25 bronze badges

answered Mar 22, 2014 at 6:36

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

Comments

Shiva Avula · Accepted Answer · 2014-03-22 07:06:29Z

Using CSS is the perfect solution for this. But anyway to answer the OP question, here is the problem.

Your code does works and changes the font-size on hover. The difference is small and little hard to differentiate as @Anant said.

The other problem is that if you need to emulate a hover effect like css your code will not work. Because in jQuery once you set the font-size on hover, the style of element remains the same set by hover function, it will not reset to default on mouse out. So try changing it to 'mouseenter' and 'mouseout'.

And also use the 'vertical-align:middle' property or all the divs next to it will get disturbed as font-size changes.

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

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

Here is a jsFiddle

Note: It is good practice to do such simple tasks from css. Only go for jQuery when the effect is not possible with css. Hope this helps you.

Akshay Mishra · Accepted Answer · 2014-08-02 06:53:34Z

1

Your Jquery is working fine. change font size difference on hover. eg: 100px to 120px Or use simple css for hover action

element:hover{font-size:120px}

answered Aug 2, 2014 at 6:53

Akshay Mishra

1,7632 gold badges16 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery CSS Font Size Not Working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related