How to keep hover attributes while disabling click

Question

So I have this list with some hover effect added through CSS. HTML:

<li><a href="#">Current Period</a>
  <ul>
        <li><a href="#">2012</a>
        <li> a href="#">2011</a> //...you get the point

CSS:

#nav a:hover {
    background-color: #fff;
    color: #333;
}

When the user hovers over current period a list of children elements appear (2012, 2011... which have children of their own). My problem is that users can click on "Current Period". I have managed to remove the click by adding a class to the anchor like so:

<li><a href="#" class="noclick">Current Period</a> ....

CSS:

.noclick { pointer-events: none; cursor: default; }

but this of course removes the hover feature. I want to keep the hover effect while making the button un-clickable (I was thinking javascript, but I want a more "direct" solution). I appreciate any help :)

Answer 1

In your click handler test whether the clicked item has that class:

$("#nav a").click(function(e){
     if ($(e.target).hasClass("noclick"))
         return false;

     // your other code here
});

Note that by testing the target element for the event you don't then prevent the clicks on child elements from working.

Or if the "noclick" class is not changed dynamically, i.e., those "noclick" links start out as and will always be "noclick", you could change the selector so that your click handler isn't bound to those particular elements:

$("#nav a").not(".noclick").click(function() { ...

Answer 2

Have you tried?

$('.noclick').unbind('click');

or

$('.noclick').click(function(e){e.preventDefault();});

or

<a href="javascript:void(0);">Text</a>