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事件中，你使用了错误的选择器（你已经使用了＆＃34;标题＆＃34;而不是＆＃34; .header＆＃34;）。试试这个：

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

Answer 2

您错过了.header班级名称

中的点（。）

$('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（）不起作用

3 个答案: