javascript - Jquery hover not working, doesnt add class -

i hoping take @ code , 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 can tell did wrong, cant see find out did wrong..

the jquery gonna bit different this, because want add class open .btn-group whenever user hovers on a#toggle-dropdown.

using js hover effects not always idea, instead use css if can:

#toggle-dropdown {   // non-hovered style effects }  #toggle-dropdown:hover {   // alternate effects } 

this far quicker when have many many tags.

to highlight links:

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

the reasons not use css js limited:

• you not use anchor (<a>) tag
• and want compatibilty ie8 , earlier

if use <a> anchor tag there no reason not use css.

in other cases, css way prefer.

if can (as use jquery) last step standard , conformity , use bootstrap, useful in case requires up-front learning. trust me, pay off in html web pages write there on.