Change CSS of cursor with jQuery

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
</ul>

solution

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