JQuery mouseenter 和 mouseleave css 不工作。

Question

正在尝试制作扩展导航栏。用 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>

The JSFiddle

这可能是菜鸟的错误，我以前没有使用过JQuery，所以如果您能提供帮助，我们将不胜感激。谢谢！

Answer 1

我确实使用 css 而不是 jquery 来处理简单的事情。你总是可以使用 :hover 来处理这些东西。看看。

nav:hover {
    width:200px;
    overflow:visible;
    transition:ease 1s;
}

JSfiddle Working

Answer 2

.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"});
                });
            });

更正版本：http://jsfiddle.net/h8nro6s3/2/

JQuery mouseenter 和 mouseleave css 不工作。

JQuery mouseenter and mouseleave css, isn't working.

jquery

html

css

nav