我正在尝试使用 jQuery 在鼠标悬停在
divHTML：
<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';
}
不要像这样滥用 jQuery。使用CSS。
div:hover { font-size: 100px }
我同意@BJB568。您可能正在寻找这个：
$("div").hover(function(){
$(this).css("font-size", "100px");
},
function(){
$(this).css("font-size", "95px");
}
);
使用 CSS 是完美的解决方案。但无论如何要回答OP问题，问题就在这里。
您的代码确实有效，并在悬停时更改字体大小。正如@Anant 所说，差异很小并且很难区分。
另一个问题是，如果你需要模拟像 css 这样的悬停效果，你的代码将无法工作。因为在 jQuery 中，一旦您在悬停时设置字体大小，元素的样式将保持悬停功能设置的相同，不会在鼠标移开时重置为默认值。因此尝试将其更改为“mouseenter”和“mouseout”。
还可以使用“vertical-align:middle”属性，否则它旁边的所有 div 都会随着字体大小的变化而受到干扰。
$("div").mouseenter(function(){
$(this).css("font-size", "100px");
});
$("div").mouseout(function(){
$(this).css("font-size", "50px");
});
这是一个jsFiddle
注意：从 css 中执行此类简单任务是一个很好的做法。仅当 css 无法实现效果时才使用 jQuery。希望这对您有帮助。
您的 Jquery 工作正常。更改悬停时的字体大小差异。 例如：100 像素到 120 像素 或者使用简单的 CSS 进行悬停操作
element:hover{font-size:120px}