CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jose
Jose

Reputation: 1140

How to keep hover attributes while disabling click

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

Upvotes: 8

Views: 9230

Answers (5)

shingou
shingou

Reputation: 49

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;
    });
});

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

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

Upvotes: 3

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50643

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.

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

You can use the noClick class to prevent the default event

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

Upvotes: 0

chris
chris

Reputation: 36957

Have you tried?

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

or

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

or

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

Upvotes: 2

Related Questions