Want to create hover link menu in jquery

Question

heyy,

i want to create some hover background link when mouseover in jquery !!!

when the mouse over on " .nav Menu nav a ", I add addclass " .hover " and when mouse out removeClass " .hover "

more info on my fiddle -> demo JS FIDDLE

HTML : > >

            <a href="inc/about/" class="Load frame" id="html" data-html="about">
             <div class="hover"></div> about
            </a>

            <a href="inc/porject/" class="Load frame" id="html" data-html="project">
              <div class="hover"></div> project
            </a>

            <a href="inc/story/" class="Load frame" id="html" data-html="story">
             <div class="hover"></div> story
            </a>

            <a href="inc/contact/" class="Load frame" id="html" data-html="contact">
              <div class="hover"></div> contact
            </a>

CSS :

.navMenu nav {

      width: 100%; height: auto;
      list-style-type: none; margin: auto auto;
      text-align: center;

    }


.navMenu a {

      height: 4em; width: 100%; 
      text-decoration: none; text-transform: uppercase;
      text-align: center; display: block;
      line-height: 4em; font-weight: normal;
      font-size: 1em; color: rgba(238,79,87,1); 
      position: relative; z-index: 100;

}

.hover{

    /* add background, width, height, ect... */

}

JS:

function hoverLi(){

        $(".navMenu a").hover(function(){

          $(this).stop(true, true).addClass("hover");

        },function(){

          $(this).removeClass("hover");


        });


      }

thanks a lot

@Reeno because i want to animate left position to 0% from 100% like keyframes but in jquery — axel schouten, Aug 21 '14 at 10:00

Kristian · Answer 1 · 2014-08-21T09:47:08.417

0

Here is JSFiddle

http://jsfiddle.net/t6d4hvkg/4/

use css selector :hover

It's a pseudoclass

update your CSS:

.navMenu nav {

  width: 100%; height: auto;
  list-style-type: none; margin: auto auto;
  text-align: center;

}


.navMenu a {

  height: 4em; width: 100%; 
  text-decoration: none; text-transform: uppercase;
  text-align: center; display: block;
  line-height: 4em; font-weight: normal;
  font-size: 1em; color: rgba(238,79,87,1); 
  position: relative; z-index: 100;

}

.navMenu nav:hover{

background:#000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color:white;

}

edited Aug 21 '14 at 09:47

answered Aug 21 '14 at 09:25

Kristian

2,456
8
23
23

Yes but it's CSS, i want use javascript hover ! – axel schouten Aug 21 '14 at 09:30
@axelschouten But why? Not all browsers support javascript and user can opt out to disable javascript, while CSS cannot be disabled. It also slow down the page loading time, resulting to better SEO. – Kristian Aug 21 '14 at 09:32
yes i know, but i must do an animation with easing on hover and i prefer use Jquery hihi :o) – axel schouten Aug 21 '14 at 09:39
http://jsfiddle.net/t6d4hvkg/4/ Here is jsfiddle with easing animation with css only – Kristian Aug 21 '14 at 09:46
lol thanks but i know to do this but i want to do with javascript :{o – axel schouten Aug 21 '14 at 09:52
in fact i want an animation who to play with position and left. Firstly, left at 0% and when i mouseover i want that "div class=hover ",do 100% position left – axel schouten Aug 21 '14 at 09:53

score 0 · Answer 2 · answered Aug 21 '14 at 09:28

0

Just in case you insist to use jQuery then you just need to remove your function and leave just this part:

$(".navMenu nav a").hover(function(){
    $(this).addClass("hover");
},function(){
    $(this).removeClass("hover");
});

Check out this DEMO..

answered Aug 21 '14 at 09:28

Bla...

7,228
7
27
46

hooooo thanks thanks :D but now i want animate left right background – axel schouten Aug 21 '14 at 09:35
what do you mean by `animate left right background` ? – Bla... Aug 21 '14 at 09:36
@axelschouten add `transition: all 1s;` to the css selector that needs to be animated – singe3 Aug 21 '14 at 09:37
@user26409021user i mean that mouseover the "div class="hover" start to 0% at left and from 100% at left !!!!! you know what mean ? like keyframes hover – axel schouten Aug 21 '14 at 09:42

score 0 · Answer 3 · answered Aug 21 '14 at 09:34

0

I guess you need to add a background color to your hover class like so:

.hover{
  background-color:#eee;

}

and then call document.ready function, passing your HoverLi function to it.

answered Aug 21 '14 at 09:34

Mekicha

811
9
21

Want to create hover link menu in jquery

3 Answers3