Блог

Главная - Вопросы по программированию - проверьте, имеет ли href только # для изменения курсора с помощью css

проверьте, имеет ли href только # для изменения курсора с помощью css

#javascript #html #jquery #css

#javascript #HTML #jquery ( jquery ) #css #jquery

Вопрос:

У меня есть ссылка в breadcrumb Home> Media > News
Home , связанная с домом, Медиа — это не страница, а просто родительская категория, в которой есть подстраницы, такие как Новости, Галерея и т.д…

итак, в breadcrumb, поскольку Media — это просто родительская категория, но не фактическая страница, я хочу, чтобы курсор был указателем, но не рукой.

Приведенный ниже код, например, который является jQuery, изменяет курсор на указатель, и если я тестирую с цветом, то он меняет цвет на зеленый для первых двух элементов.

Могу ли я добиться того же с помощью CSS или как я могу исправить это с помощью jquery

 <ul class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="#">Media</a></li>
  <li class="active"> News</li>
</ul> 

$('a[href*="#"]').each(function() {
    $(".breadcrumb > li > a").css('color','green');
    //$(".breadcrumb > li > a").css('cursor','pointer');
});

http://jsfiddle.net/Lc5ywaq2/2/

Комментарии:

1. $(".breadcrumb > li > a") выбирает ВСЕ ваши якоря …. `this` внутри each является текущим элементом, поэтому вы захотите $(this).whatever

2. я пробовал, но результат тот же

3. нет, это совсем не тот результат — jsfiddle.net/2b30owu6 — конечно, ваш код здесь и код в вашей скрипке разные… вы пытаетесь изменить курсор на указатель … что уже есть … таким образом, вы не увидите никаких изменений

4. возможно, вы хотели .css('cursor','default') указать, что это не ссылка на другую страницу?

5. о, конечно, вы можете .breadcrumb li a[href^="#"] { /* style goes here */}

Ответ №1:

Поскольку ваш CSS в настоящее время имеет

 .breadcrumb li a { 
   color:red;
}

Вы захотите добавить

 .breadcrumb li a[href^="#"] { 
   color:green;
}

примечание: ваш jquery ищет # где угодно в href, но вы должны искать в # качестве первого символа, это то, что [href^="#"] делает в отличие от [href*="#"]