[英]How to temporarily enlarge font size on hover using jQuery
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. 坦率地说,我花了12分钟来回顾过去有关我所遇到的问题的线索。
Sorry If it is a dumb one 对不起,如果是愚蠢的
Use CSS instead, and spare yourself the javascript headache: 请改用CSS,并避免JavaScript麻烦:
<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: 另一方面,如果您想扩大容器内的所有p
,将:hover
在容器本身上时 ,可以将:hover
放在容器上,如下所示:
<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: 同时,在使用javascript进行测试时,请确保javascript是不活动的:
<script>
/*
$("#column3").hover(function(){
$("p").css("fontSize", "30px");
});
*/
</script>
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 HTML
<div id="column3">test</div>
http://jsfiddle.net/Lbxsf2t0/ http://jsfiddle.net/Lbxsf2t0/
EDIT if you want to change the size of the p
specifically . 如果要专门更改p
的大小,请进行编辑 。
var size = $("#column3").css("fontSize");
$("#column3").hover(
function(){
$(this).find("p").css("fontSize", "30px");
},
function(){
$(this).find("p").css("fontSize", size);
}
);
To change the font-size you gotta use "font-size". 要更改字体大小,您必须使用“ font-size”。 Have a look in below js code 看看下面的js代码
$("#column3").hover(function(){
$('p').css("font-size","30px");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.