Change CSS of cursor with jQuery

Question

I'm trying to change the CSS of the cursor to default on a a href link of # on the menu-item-4082 "About" link below. And I don't know why this seemingly simple function doesn't want to work.

Must be something simple I'm not seeing. Is my CSS selector correct?

Or is there a different or better way to change the CSS with jQuery? What about removing the href="#" as well?

Fiddle: http://jsfiddle.net/2nbad1gc/

Function:

$("li#menu-item-4082 .not-click").css("cursor","default");

HTML

<ul id="menu-main-menu-bar">
<li id="menu-item-217" class="menu-item">
    <a href="http://example.com/">Home</a>
</li>
<li id="menu-item-4082" class="menu-item menu-item-type-custom
    menu-item-object-custom menu-item-has-children menu-item-4082
    has-dropdown not-click">
    <a href="#">About</a>
</li>
<ul class="dropdown">
    <li id="menu-item-158" class="menu-item menu-item-158">
        <a href="http://example.com/values/">Values</a>
    </li>
    <li id="menu-item-4083" class="menu-item menu-item-4083">
        <a href="http://example.com/why/">Why</a>
    </li>
</ul>

Just to point out that you forgot to include jQuery in your fiddle, so it never would have worked, even with the fix provided by Josh. — Drew Kennedy
– Drew Kennedy, Commented Jan 25, 2015 at 17:42

Josh Crozier · Accepted Answer · 2015-01-25 17:46:56Z

5

Is my CSS selector correct?

No, it's incorrect. It should be:

$("li#menu-item-4082.not-click a").css("cursor","default");

You were trying to select the child of li#menu-item-4082 whose class is not-click. When in fact, the li itself had the class .not-click.

Remove the space between $("li#menu-item-4082 .not-click").

As a side note, I'd suggest adding a class rather than adding inline CSS.

$("li#menu-item-4082.not-click a").addClass('default-cursor');

.default-cursor {
    cursor: default;
}

.. you could also remove the href attribute completely:

$("li#menu-item-4082.not-click a").removeAttr('href');

If you wanted to avoid jQuery completely, you could also remove the href attribute using plain JS:

Single element:

document.querySelector('#menu-main-menu-bar .not-click a').removeAttribute('href');

Multiple elements:

var anchors = document.querySelectorAll('#menu-main-menu-bar .not-click a');

Array.prototype.forEach.call(anchors, function (el, i) {
    el.removeAttribute('href');
});

or you could avoid JS and just use CSS:

li#menu-item-4082.not-click a {
    cursor: default;
}

edited Jan 25, 2015 at 17:46

answered Jan 25, 2015 at 17:37

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

3 Comments

markratledge Over a year ago

Wow, thanks for the exhaustive answer. What I eventually needed was the multiple elements function. But, the jQuery doesn't want to work in the fiddle jsfiddle.net/2nbad1gc/28 or the live site. I loaded the live site CSS file in the fiddle, but it doesn't seem to be a CSS conflict that I can see. No console errors, either.

Josh Crozier Over a year ago

@songdogtech It appears to work in the fiddle you provided. jsfiddle.net/07bkgqvs It's worth pointing out that not all the li elements have the class .not-click as you can see, it was working for 2 of the elements.

markratledge Over a year ago

Ah, you're right; Sunday morning confusion. OK, looks like something is broken on the live site, but no console errors, it's a mystery to me. But all your answers are correct. Thanks!

EvilNabster · Accepted Answer · 2015-01-25 17:45:59Z

0

Just use simple css

.not-click a{
cursor: default;
}

http://jsfiddle.net/2nbad1gc/14/

answered Jan 25, 2015 at 17:45

EvilNabster

5161 gold badge6 silver badges20 bronze badges

Comments

Blake Frederick · Accepted Answer · 2015-01-25 17:51:34Z

0

Your selector needs to be modified to

$('li#menu-item-4082.not-click a').css("cursor", "default");

Usually it is recommended to add a class to the HTML element that sets cursor to default rather than directly change the CSS with jQuery like this.

edited Jan 25, 2015 at 17:51

answered Jan 25, 2015 at 17:42

Blake Frederick

1,70023 silver badges32 bronze badges

Collectives™ on Stack Overflow

Change CSS of cursor with jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related