jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

I'm using jQuery ui tabs. The app correctly sets the css class to .ui-state-disabled and t开发者_如何学JAVAhe link can be clicked but it doesn't do anything. What I'm trying to accomplish here is making the cursor appear as default instead of the hand/pointer. I cannot get this to work.

css

.ui-state-disabled:hover {
     cursor: default;
}

html

<li class="ui-state-default ui-corner-top ui-state-disabled">
   <a href="#Procedures" title="Procedures">
       <div>Procedures</div>
   </a>
 </li>

Does anyone know how to correct this? I don't want the user to think the element is clickable whilst in this state. Thanks for any tips or tricks.

Since you are using jQuery ui and and you want to override one of it's classes, you need to use !important. This way your css definition of the class will take more importance.

.ui-state-disabled:hover {
     cursor: default !important;
}