Jquery hover not working, doesnt add class

Question

i was hoping someone could take a look at my code and tell me whats wrong..

HTML5:

<div class="btn-group" id="dropdown-wrapper">
    <a href="#" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Stap 1</a></li>
        <li><a href="#">Stap 2</a></li>
        <li><a href="#">Stap 3</a></li>
        <li><a href="#">Stap 4</a></li>
        <li><a href="#">Stap 5</a></li>
        <li><a href="#">Stap 6</a></li>
        <li><a href="#">Stap 7</a></li>
        <li><a href="#">Stap 8</a></li>
        <li><a href="#">Stap 9</a></li>
        <li><a href="#">Stap 10</a></li>
    </ul>
</div>

Jquery :

$(document).ready(function () {
    $("a#toggle-dropdown").hover(function () {
        $("a#toggle-dropdown").addClass("test");
    })
});

i hope anyone can tell what i did wrong, i cant see to find out what i did wrong..

the Jquery is gonna be a bit different that this, because i want it to add the class open to the .btn-group whenever the user hovers over the a#toggle-dropdown.

your code seems fine. Is a#toggle-dropdown loaded at some point? — AmmarCSE
– AmmarCSE, Commented Jun 3, 2015 at 8:17
Wild guess: you have multiple elements with the same ID (toggle-dropdown) in your page. — Robby Cornelissen
– Robby Cornelissen, Commented Jun 3, 2015 at 8:18
not sure what you mean by loading a#toggle, no multiple elements, and i added some css to see if it works on hover — Dennis Heitinga
– Dennis Heitinga, Commented Jun 3, 2015 at 8:23

pid · Accepted Answer · 2015-06-03 08:27:02Z

4

Using JS for hover effects is not always a good idea, instead use CSS if you can:

#toggle-dropdown
{
  // non-hovered style effects
}

#toggle-dropdown:hover
{
  // alternate effects
}

This is far quicker especially when you have many many tags.

To highlight all links:

.dropdown-menu a
{
  background-color: #cccccc; // light grey
}

.dropdown-menu a:hover
{
  background-color: #ff0000; // red
}

The reasons not to use CSS but JS are very limited:

you do NOT use an anchor (<a>) tag
AND you want compatibilty with IE8 and earlier

If you use an <a> anchor tag there really is NO reason to not use CSS.

In all other cases, the CSS way is to prefer.

If you can (as you already use jQuery) do the last step to standard and conformity and use Bootstrap, it is very useful in your case but requires some up-front learning. Trust me, it will pay off in all HTML web pages you will write from there on.

edited Jun 3, 2015 at 8:27

answered Jun 3, 2015 at 8:20

pid

11.6k6 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A. Wolff Over a year ago

Good point but as OP said

the Jquery is gonna be a bit different that this, because i want it to add the class open to the .btn-group whenever the user hovers over the a#toggle-dropdown.

CSS only wouldn't be a solution because you cannot target parent in CSS

Dennis Heitinga Over a year ago

im already using bootstrap, this dropdown thing was a snippet, but it shows the menu onclick, and the owner wants it to show on hover, and i know how to work with pseudo classes in CSS, but didnt think i can show the menu with CSS

Rohan Kumar · Accepted Answer · 2015-06-03 08:53:07Z

3

What you need,

$("a#toggle-dropdown").hover(function () {
    $(this).addClass("test"); // use this instead
});

$("a#toggle-dropdown").hover(function () {
   $(this).addClass("test"); // use this instead
});

.test{
   color:#0CF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" id="dropdown-wrapper">
    <a href="#" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Stap 1</a></li>
        <li><a href="#">Stap 2</a></li>
        <li><a href="#">Stap 3</a></li>
        <li><a href="#">Stap 4</a></li>
        <li><a href="#">Stap 5</a></li>
        <li><a href="#">Stap 6</a></li>
        <li><a href="#">Stap 7</a></li>
        <li><a href="#">Stap 8</a></li>
        <li><a href="#">Stap 9</a></li>
        <li><a href="#">Stap 10</a></li>
    </ul>
</div>

But its better to use CSS effects as @pid suggests like,

a#toggle-dropdown
{
     color:#CCC;
}

a#toggle-dropdown:hover
{
     color:#FFF;
}

Also I think you need to add open class to the ul drop-down like

$("a#toggle-dropdown").hover(function () {
    $(this).next('.dropdown-menu').addClass("open"); // add open class to show
},function(){
    $(this).next('.dropdown-menu').removeClass("open"); // remove open to hide it
});

edited Jun 3, 2015 at 8:53

answered Jun 3, 2015 at 8:19

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

3 Comments

Dennis Heitinga Over a year ago

not working, i added css to .test to change the bgcolor to red, but no effect

Rohan Kumar Over a year ago

try alert(window.jQuery); to check the library is added or not. See my working snippet.

Rohan Kumar Over a year ago

May be, remove the extra closing span tag from your anchor tag.

cdr89 · Accepted Answer · 2015-06-03 08:27:05Z

0

Id should be unique, so you can use only $("#toggle-dropdown") instead of $("a#toggle-dropdown");

Let's try this:

$(document).ready(function () {
    $( "#toggle-dropdown" ).on("hover", function() {
        $(this).addClass("test");
    });
});

answered Jun 3, 2015 at 8:27

cdr89

9869 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery hover not working, doesnt add class

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related