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 :)

nnnnnn · Accepted Answer · 2012-09-14 00:32:05Z

3

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() { ...

edited Sep 14, 2012 at 0:32

answered Sep 14, 2012 at 0:23

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Over a year ago

The first piece of code makes the perfect sense and, for my purposes, fits the bill perfectly. Thank you! I appreciate your help :)

chris · Accepted Answer · 2012-09-13 23:00:14Z

2

Have you tried?

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

or

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

or

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

answered Sep 13, 2012 at 23:00

chris

37k54 gold badges149 silver badges256 bronze badges

4 Comments

Jose Over a year ago

I have tried all three of them, but the click still gets recognized by the javascript function. Have a feeling the answer is here but I'm doing something wrong

chris Over a year ago

I notice a comment on another answer where you say you have another function capturing the click. There in lies your problem.. conflicting functionality. Mind you I have no context to how your capturing that click currently, but assuming if your using jquery its likely something to the extent of $('a').click(function(){//stuff}); which means you have to work some logic into that other function thats catching clicks on a global level to see if the link your clicking on hasClass('noclick') and if it does don't do what you want it to do.

Jose Over a year ago

Your comment, along with the one I marked as an answer, are what truly solved my problem in the easiest, less painful way. I appreciate your help, thank you :)

chris Over a year ago

Well you flagged someone else, unless you meant that comment for them. But either way no problem :-D

Nelson Benítez León · Accepted Answer · 2012-09-13 23:04:43Z

1

Just change your following line:

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

for this one

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

and change your following css:

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

for this one

.noclick { cursor: default; }

that should do what you want.

answered Sep 13, 2012 at 23:04

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

1 Comment

Jose Over a year ago

I have a function on the background that still recognizes the click on the object

Sushanth -- · Accepted Answer · 2012-09-13 23:03:43Z

0

You can use the noClick class to prevent the default event

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

answered Sep 13, 2012 at 23:03

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Jose Over a year ago

This disables my other function (which checks to see if a child element was clicked)

shingou · Accepted Answer · 2012-09-14 00:33:17Z

0

on .noclick class remove pointer-events

.noclick { cursor: default; }

and add js to .noclick element

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

edited Sep 14, 2012 at 0:33

answered Sep 14, 2012 at 0:12

shingou

498 bronze badges

Collectives™ on Stack Overflow

How to keep hover attributes while disabling click

5 Answers 5

1 Comment

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related