jQuery CSS字体大小不起作用答案

【问题标题】：jQuery CSS Font Size Not WorkingjQuery CSS字体大小不起作用
【发布时间】：2014-04-29 17:39:19
【问题描述】：

我正在尝试使用 jQuery 来增加 div 中的字体大小，同时鼠标悬停在它上面。脚本加载正确，但 jQuery 什么也没做。谁能告诉我出了什么问题？

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

【问题讨论】：

你的 jquery 似乎工作正常.. 但是如果你设置 css 字体大小 95px 并且在 jquery 100 px 中它有点不同所以你不能diffrancate

标签： jquery css font-size

【解决方案1】：

不要像这样滥用 jQuery。使用 CSS。

div:hover { font-size: 100px }

【讨论】：

【解决方案2】：

我同意@BJB568 你可能正在寻找这个..

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

【讨论】：

【解决方案3】：

使用 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。希望对您有所帮助。

【讨论】：

【解决方案4】：

您的 Jquery 工作正常。更改悬停时的字体大小差异。例如：100px 到 120px 或者使用简单的 css 进行悬停操作

element:hover{font-size:120px}

【讨论】：