Question

是否有任何方法可以将鼠标悬停在导航锚定链接上，其行为类似于href操作，其中将鼠标悬停在“关于”＆＃39;关于＆＃39;链接（如在我的网站下面）显示直接进入＆＃39;关于＆＃39;页面的一部分，然后将鼠标从链接移开回到原来的div，如果＆＃39;关于＆＃39;没有点击链接？

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

你可以使用jQuery

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

Answer 2

您可以使用.mouseover（）函数。

我使用以下更改更新了您的CodePen：http://codepen.io/anon/pen/vxJWVp

这里是Jquery Mouseover功能：

$( 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');

 });

然后只需添加相应的＆＃39; id =＆＃34; 1＆＃34; ＆＃39;

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

给链接悬停与href相同的效果？

2 个答案: