https://stackoverflow.com/questions/22574265
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDon't abuse jQuery like this. Use CSS.
div:hover { font-size: 100px }
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';
}
المحلول
نصائح أخرى
I am agree with @BJB568 you might be looking for this ..
$("div").hover(function(){
$(this).css("font-size", "100px");
},
function(){
$(this).css("font-size", "95px");
}
);
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.
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}
لا تنتمي إلى StackOverflow
