Изменение CSS-курсора с помощью jQuery

Question

Я пытаюсь изменить CSS курсора на default по ссылке a href# на странице menu-item-4082 «О программе» ниже. И я не знаю, почему эта, казалось бы, простая функция не хочет работать.

Должно быть, что-то простое я не вижу. Правильно ли настроен мой CSS-селектор?

Или есть другой или лучший способ изменить CSS с помощью jQuery? Как насчет удаления href="#"?

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

Функция:

$("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> 

Answer 1

Является ли мой селектор CSS правильно?

Нет, это неправильно. Оно должно быть:

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

Вы пытаетесь выбрать ребенка li#menu-item-4082 чей класс not-click. Когда на самом деле, li сам имел класс .not-click.

Удалить позицию между $("li#menu-item-4082 .not-click").

В качестве побочного примечания я бы предложил добавить класс вместо добавления встроенного CSS.

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

.default-cursor { 
    cursor: default; 
} 

.. можно также удалить href атрибут полностью:

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

Если вы хотите, чтобы избежать JQuery полностью, вы также можете удалить атрибут href используя обычный JS:

Отдельный элемент:

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

несколько элементов:

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

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

или вы могли бы избежать JS и просто использовать CSS:

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

Answer 2

Ваш селектор должен быть изменен, чтобы

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

Обычно рекомендуется добавить класс к элементу HTML, который устанавливает cursor в default, а не напрямую изменять CSS с помощью jQuery.

Answer 3

Просто используйте простую CSS

.not-click a{ 
cursor: default; 
} 

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