JQuery mouseleave（）不起作用

Question

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

function main() { 
 
    page(); 
 
    $('.header h1').delay(2000).css('font-size', '50px'); 
 
    $('.header').mouseenter(function() { 
 
\t $('.header h1').css('font-size', '80px'); 
 
    }); 
 
    $('.header').mouseleave(function() { 
 
\t $('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"> 
 

 
\t <h1>Jacobsky</h1> 
 

 
\t <div class="navbar"> 
 

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

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

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

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

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

 
\t </div> 
 

 
</div>

的onclick="page()"涉及到别的东西。 任何人都可以解决这个问题吗？

Answer 1

你已经错过了点在.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 2

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

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

Answer 3

它，因为你必须在你选择一个错字它应该是：

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