Question

我试图在鼠标悬停时使用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';
}

Answer 1

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

div:hover { font-size: 100px }

Answer 2

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

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

Answer 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。希望这会对你有所帮助。

Answer 4

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

element:hover{font-size:120px}

jQuery CSS字体大小不起作用

4 个答案: