JQuery mouseleave() is not working

Question

When I hover over the div element, the text enlarges however when the mouse leaves the div, the text stays the same size. I have tried mouseenter(), mouseleave() and hover() functions but nothing seems to work. Here is my code:
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>

The onclick="page()" is related to something else. Can anyone solve this issue?

Answer 1

You've missed the dot (.) in the .header class name

$('header h1')

Corrected code:

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);