JQuery mouseleave() 不工作

Question

当我将鼠标悬停在 div 元素上时，文本会放大，但是当鼠标离开 div 时，文本会保持相同大小。我尝试了 mouseenter()、mouseleave() 和 hover() 函数，但似乎没有任何效果。这是我的代码：
JQuery:

function main() {
  page();
  $('.header h1').delay(2000).css('font-size', '50px');
  $('.header').mouseenter(function() {
 $('.header h1').css('font-size', '80px');
  });
  $('.header').mouseleave(function() {
 $('header h1').css('font-size', '50px');
  });
}
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header">

 <h1>Jacobsky</h1>

 <div class="navbar">

  <a onclick="page('home')">Home</a>

  <a onclick="page('info')">Information</a>

  <a onclick="page('about')">About Us</a>

  <a onclick="page('contact')">Contact Us</a>

  <a onclick="page('m_info')">More Info</a>

 </div>

</div>

onclick="page()" 与其他内容有关。谁能解决这个问题？

Answer 1

在您的 mouseleave 事件中您使用了错误的选择器（您使用了 "header" 而不是“.header”）。试试这个：

$('.header h1').css('font-size', '50px');

Answer 2

您错过了 .header class 名称中的点 (.)

$('header h1')

更正后的代码：

function main() {
  page();
  $('.header h1').delay(2000).css('font-size', '50px');
  $('.header').mouseenter(function() {
    $('.header h1').css('font-size', '80px');
  });
  $('.header').mouseleave(function() {
    $('.header h1').css('font-size', '50px');
  });
}
$(document).ready(main);

Answer 3

因为你的选择器有错字，应该是：

$('.header').mouseleave(function() {
  $('.header h1').css('font-size', '50px');
});

JQuery mouseleave() 不工作

JQuery mouseleave() is not working

html

javascript

jquery

mouseleave