javascript - 使链接悬停与href具有相同的作用？

是否有任何方法可以使悬停在导航锚链接上的行为类似于href动作，即将“关于”链接（如在我的网站下面）显示的悬停链接直接转到页面的“关于”部分，并且那么如果未单击“关于”链接，则将鼠标从链接移开会返回到原始div？

Codepen：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>

最佳答案

你可以使用jQuery

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