CODEWITHSUNDEEP
javascriptjqueryhtmlhover
Dennis Heitinga
Dennis Heitinga

Reputation: 65

Jquery hover not working, doesnt add class

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.

Upvotes: 0

Views: 404

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

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
});

Upvotes: 3

cdr89
cdr89

Reputation: 988

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");
    });
});

Upvotes: 0

pid
pid

Reputation: 11597

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.

Upvotes: 4

Related Questions