CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7138187
user7138187

Reputation:

Give link hover same effect as href?

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>

Upvotes: 0

Views: 91

Answers (2)

Staveven
Staveven

Reputation: 120

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>

Upvotes: 0

stackoverfloweth
stackoverfloweth

Reputation: 6917

you could use jQuery

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

Upvotes: 1

Related Questions