CODEWITHSUNDEEP
javascriptjqueryhtmlmouseleave
Cobain Ambrose
Cobain Ambrose

Reputation: 91

JQuery mouseleave() is not working

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?

Upvotes: 1

Views: 864

Answers (3)

Nabil Ali
Nabil Ali

Reputation: 157

Its because you have a typo in your selector it should be:

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

Upvotes: 0

Sergej
Sergej

Reputation: 2196

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

Upvotes: 2

AGB
AGB

Reputation: 2448

In your mouseleave event you have used the wrong selector (you have used "header" instead of ".header"). Try this:

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

Upvotes: 2

Related Questions