JQuery - применить CSS к первому пункту

Я начинающий студент учится Jquery, и вопрос говорит:JQuery - применить CSS к первому пункту

Добавить прослушиватель событий JQuery стиля, первый абзац, когда курсор мыши находится над ним, как коричневый цветом , жирным шрифтом и подчеркнутым.

Я пытаюсь это:

$(document).ready(function() { 
    $("p").first().hover(
     function() { 
      (this).css('color','brown'); 
      (this).css('font-weight','bold'); 
      (this).css('text-decoration','underline'); 
     }, 
     function() { 
      (this).css('color','black'); 
      (this).css('font-weight','normal'); 
      (this).css('text-decoration','none'); 
     } 
    ); 
});

Но это не работает. Все p-теги обернуты в разные теги div, не так ли? Под «первым абзацем» я думаю, что это означает первый абзац на странице.

источник

2013-05-06 djmordigal

кажется хорошо мне http://jsfiddle.net/arunpjohny/m8ZSa/1/ –

Там это тип, вы упускаете '' знак $ в '(это) ' –

Ваш код $ обертку скучаю.

(this).css css - это метод объекта jquery. но там вы пытаетесь вызвать его на элемент DOM, указав (this).css.

Сокращение на .first() является :first. Вы также можете обратиться к нему как $("p:first").hover(

Demo

$(document).ready(function() { 

    $("p").first().hover(

     function() { 
      var elem = $(this); 
      elem .css('color','brown'); 
      elem .css('font-weight','bold'); 
      elem .css('text-decoration','underline'); 
     }, 
     function() { 
      var elem = $(this); 
      elem .css('color','black'); 
      elem.css('font-weight','normal'); 
      elem.css('text-decoration','none'); 
     } 
    ); 
});

Просто расширить и продемонстрировать свой вопрос о том, как выбрать первый пункт только для этого конкретных дел. Вы можете использовать селекторную цепочку/фильтрацию, чтобы гарантировать, что затронуты только предполагаемые абзацы. См Example и код ниже, где стиль ориентирован только на пункт из DIV с классом А.

$(document).ready(function() { 

    $("div.A p:first").hover(

    function() { 
      var elem = $(this); 
      elem .css('color','brown'); 
      elem .css('font-weight','bold'); 
      elem .css('text-decoration','underline'); 
     }, 
     function() { 
      var elem = $(this); 
      elem .css('color','black'); 
      elem.css('font-weight','normal'); 
      elem.css('text-decoration','none'); 
     } 
});

источник

2013-05-06 03:08:02 PSL

Все еще не работает. Это может иметь какое-то отношение к тому факту, что он заключен в тег div с классом, но есть еще одна группа div с тем же классом, который также имеет абзацы, поэтому я не знаю, как выбрать именно этот абзац. – djmordigal

Проверьте это http://jsfiddle.net/APSzn/. Предоставьте свой HTML .. – PSL

Посмотрите это. http://jsfiddle.net/Zds6a/ – PSL

Попробуйте также $('body p:first').hover(function() { .... })

$(document).ready(function() { 
    $('p').first().hover(
     function() { 
      $(this).css({'color':'brown', 'font-weight':'bold','text-decoration':'underline'}); 

     }, 
     function() { 
      $(this).css({'color':'black', 'font-weight':'normal','text-decoration':'none'}); 

     } 
    ); 
});

источник

2013-05-06 03:07:30

Это ничего не делает, когда я наводил указатель мыши на первый абзац. Этот абзац завернут в div с классом «special», но есть еще один div с тем же классом, который также имеет абзацы, поэтому я не уверен, что делать, если он говорит «первый абзац». – djmordigal

Попробуйте коробление все (это), как $ (это)

т.е.

$(document).ready(function() { 
    $("p").first().hover(
     function() { 
      $(this).css('color','brown'); 
      $(this).css('font-weight','bold'); 
      $(this).css('text-decoration','underline'); 
     }, 
     function() { 
      $(this).css('color','black'); 
      $(this).css('font-weight','normal'); 
      $(this).css('text-decoration','none'); 
     } 
    ); 
});

Хотя я не думаю, что это вопрос

источник

2013-05-06 03:09:03 basarat

JQuery - применить CSS к первому пункту

ответ

Смежные вопросы