试图制作一个扩展的导航栏。是用 css 做的，但在点击新页面后未能阻止它重置。要修复它，请使用 Jquery。使用 mouse enter 和 mouseleave 来尝试这样做。使用警报时，它有效，但在尝试应用 css 时，它无法正常工作。
Jquery
$(function(){
$("nav").mouseenter(function(){
.css({"width": "200px", "overflow": "visible"});
});
$("nav").mouseleave(function(){
.css({"width": "60px", "overflow": "hidden"});
});
});
HTML
<body>
<div class="container">
<header>
<h1>Chemistry Home</h1>
</header>
<nav>
<div id="logo">
<img src="Images/Logo.png" >
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x" id="on"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons -->
<span class="nav-text" id="on">
HOME
</span>
</a>
</li>
<li>
<a href="standards_&_info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
STANDARDS & INFORMATION
</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">
INTERESTING INFORMATION
</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">
JOBS
</span>
</a>
</li>
<li>
<a href="photo_&_video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">
PHOTOS & VIDEOS
</span>
</a>
</li>
</ul>
</nav>
<div id="cover">
</div>
<div class="content">
<div class="two-box">
<div class="title">
<h2>Why</h2>
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur. Cras ornare nibh vitae justo hendrerit, nec congue metus vulputate. Integer in odio purus. Maecenas et elementum urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Nunc pellentesque eros at rhoncus consectetur.Aliquam nec nisi sit amet ligula bibendum dignissim eget eu ex. Praesent ut ex semper, cursus lorem in, maximus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Fusce nec sem sem. Praesent eget justo sed ante volutpat malesuada ullamcorper eget eros. Phasellus sodales nisl enim, id tincidunt ligula ultricies sit amet.</p>
</div>
</div>
<div class="two-box">
<div class="title">
<h2>Quotes</h2>
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Cras ornare nibh vitae justo hendrerit, nec congue metus vulputate. Integer in odio purus. Maecenas et elementum urna. Aliquam nec nisi sit amet ligula bibendum dignissim eget eu ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Praesent ut ex semper, cursus lorem in, maximus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Fusce nec sem sem. Praesent eget justo sed ante volutpat malesuada ullamcorper eget eros. Phasellus sodales nisl enim, id tincidunt ligula ultricies sit amet.</p>
</div>
</div>
</div>
<footer>
rueregrewghe
</footer>
</div>
</body>
这可能是菜鸟犯的错误，我以前没有使用过 JQuery，所以如果您能提供帮助，我们将不胜感激。谢谢!
最佳答案
.css 不是有效的独立表达式。你必须使用 $(this).css。你的 css 不正确，你的 fiddle 没有包含 jquery...
$(function(){
$("nav").mouseenter(function(){
$(this).css({"width": "200px", "overflow": "visible"});
});
$("nav").mouseleave(function(){
$(this).css({"width": "60px", "overflow": "hidden"});
});
});
关于JQuery mouseenter 和 mouseleave css 不工作。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32533594/