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

Question

Is there any way to make hovering over a navigation anchor link act similarly to a href action, where hovering the link for an 'About' link (like in my site below) displays goes directly to the 'About' section of the page, and then moving the mouse away from the link goes back to the original div if the 'About' link is not clicked on?

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>

Answer 1

you could use jQuery

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

Answer 2

You can just use the .mouseover() function.

I updated your CodePen with these change: http://codepen.io/anon/pen/vxJWVp

Here's the Jquery Mouseover function:

$( document ).ready(function() {
 $('#1').mouseover(); 
});

$('#1').mouseover(function() {
$('#intro').html('Intro');

});

$('#2').mouseover(function() {
$('#intro').html('About Content goes here');

});

$('#3').mouseover(function() {
 $('#intro').html('Skills Content goes here');

 });

 $('#4').mouseover(function() {
 $('#intro').html('Work Content goes here');

 });

 $('#5').mouseover(function() {
   $('#intro').html('Contact Content goes here');

 });

Then just add the respective ' id = "1" '

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