CODEWITHSUNDEEP
jquery
djmordigal
djmordigal

Reputation: 559

jQuery - apply CSS to first paragraph

I'm a beginning student learning jQuery, and the question says:

Add a jQuery event listener to style the first paragraph when the mouse cursor is over it as color brown, bold in style and underlined.

I'm trying this:

$(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');
        }
    );
});

But it's not working. All p tags are wrapped in different div tags, does that make a difference? By "first paragraph," I think it means the first paragraph on the page.

Upvotes: 0

Views: 381

Answers (3)

PSL
PSL

Reputation: 123739

Your code is missin $ wrapper.

(this).css css is a method of jquery object. but there you are trying to invoke it on DOM element by saying (this).css.

A shorthand for .first() is :first. You can also refer to it as $("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');
        }
    );
});

Just to extend and demonstrate your question on how to select first paragraph of only that particular div. You can use selector chaining/filtering to ensure only intended paragraphs are affected. See the Example and the code below where the style is targeted only to the para of div with class A.

$(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');
        }
});

Upvotes: 4

basarat
basarat

Reputation: 275867

Try warping all (this) as $(this)

i.e: 

$(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');
        }
    );
});

Although I don't think this is the issue

Upvotes: 1

Tamil Selvan C
Tamil Selvan C

Reputation: 20209

Try also $('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'} );

        }
    );
});

Upvotes: 0

Related Questions