How to save hover attributes when click is disabled

Question

So, I have this list with some freezing effect added via 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 wraps around the current period, a list of children appears (2012, 2011 ... who have their own children). My problem is that users can click Current Period. I managed to remove the click by adding the class to the anchor like this:

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

CSS

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

but this, of course, removes the guidance function. I want to keep the hover effect by making the button un-clickable (I was thinking about javascript, but I want a more “direct” solution). I appreciate any help :)

Answer 1

In your click handler, check if the clicked element has this class:

 $("#nav a").click(function(e){ if ($(e.target).hasClass("noclick")) return false; // your other code here }); 

Note that when testing the target element for an event that you are not doing, do not interfere with the clicks of the child elements.

Or, if the class "noclick" does not change dynamically, i.e. these noclick links start the same as noclick always will, you can change the selector so that your click handler is not tied to these specific elements:

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

Answer 2

You tried?

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

or

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

or

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

Answer 3

Just change the following line:

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

for this

 <li><a href="#" class="noclick" onclick="return false;">Current Period</a> .... 

and change the following css:

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

for this

 .noclick { cursor: default; } 

which should do what you want.

Answer 4

You can use the noClick class to prevent the default event

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

Answer 5

on.noclick class remove pointer-events

 .noclick { cursor: default; } 

and add js to the .noclick element

 $('.noclick').each(function() { var $this = $(this); $this.hover(function() { // do something... }); $this.click(function() { return false; }); });