javascript - 使链接悬停与 href 具有相同的效果？

Question

有什么方法可以使悬停在导航 anchor 链接上的行为类似于 href 操作，悬停“关于”链接的链接(如在我下面的网站中)显示直接转到“关于”部分页面，然后将鼠标从链接上移开，如果没有点击“关于”链接，会回到原来的 div 吗？

代码笔:http://codepen.io/anon/pen/zZdzmB .

HTML:

<nav>

    <ul id="menu">

        <li>

            <a>Menu</a>

             <div id="dropdown">

            <ul>

                <li class="navLink active"><a href="#homeSection"><div class="navLine"></div>Home</a></li>

                <li class="navLink"><a href="#aboutSection"><div class="navLine"></div>About</a></li>

                <li class="navLink"><a href="#skillsSection"><div class="navLine"></div>Skills</a></li>

                <li class="navLink"><a href="#workSection"><div class="navLine"></div>Work</a></li>

                <li class="navLink"><a href="#contactSection"><div class="navLine"></div>Contact</a></li>

            </ul>

            </div>

        </li>

    </ul>

    </nav>

    <main>

        <section id="homeSection" class="section" data-anchor="home">

            <div class="sectionContent">

                <h1 id="intro">Intro text</h1>

            </div>

        </section>

        <section id="aboutSection" class="section" data-anchor="about">

            <div class="sectionContent">



            </div>

        </section>

        <section id="skillsSection" class="section" data-anchor="skills">

            <div class="sectionContent">



            </div>

        </section>

        <section id="workSection" class="section" data-anchor="work">

            <div class="sectionContent">



            </div>

        </section>

        <section id="contactSection" class="section" data-anchor="contact">

            <div class="sectionContent">



            </div>

        </section>

    </main>

Answer 1

你可以使用 jQuery

$('.navLink').hover(function(){  
    $(this).trigger('click');  
});