CSS property not working when chaining in jQuery

Question

This is the jQuery code:

$("#web").hover(
  function () {
    $(this).css({
             'background-color': '#ecf5fb',
             'cursor': 'pointer',
             'border': '1px solid #378ac4'
           })
           .children("a").children("img").attr("src", "1.png")
           .end().children("p").css("opacity", "1.0");

           $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).css({
             'background-color': '#e8e3e3',
             'border': '1px solid grey'
             })
             .children("a").children("img").attr("src", "2.png")
             .end().children("p").css("opacity", "0.5");

             $('#commentweb').stop(true, true).fadeOut();
  }
);

The problem is that the opacity is not changed, while everything else works. But if instead of this code I write

$(this).css({
         'background-color': '#ecf5fb',
     'cursor': 'pointer',
     'border': '1px solid #378ac4'
       })
       .children("a").children("img").attr("src", "1.png");
$(this).children("p").css("opacity", "1.0");

it works. Why is this happening?

Here is the fiddle: http://jsfiddle.net/mMB3F/6/

did you try: 'cursor': 'pointer !important'?

user657127
– user657127

2012-08-26 08:14:39 +00:00
Commented Aug 26, 2012 at 8:14 — user657127
– user657127, Commented Aug 26, 2012 at 8:14
@ansi_lumen I just gave it a try and it doesn't work

user1301428
– user1301428

2012-08-26 08:21:58 +00:00
Commented Aug 26, 2012 at 8:21 — user1301428
– user1301428, Commented Aug 26, 2012 at 8:21

Musa · Accepted Answer · 2012-08-26 08:18:08Z

If you want to go back up to the original selection you have to call .end() twice as you call children twice on the chain.

$("#web").hover(
  function () {
    $(this).css({
             'background-color': '#ecf5fb',
             'cursor': 'pointer',
             'border': '1px solid #378ac4'
           })
           .children("a").children("img").attr("src", "1.png")
           .end().end().children("p").css("opacity", "1.0");

           $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).css({
             'background-color': '#e8e3e3',
             'border': '1px solid grey'
             })
             .children("a").children("img").attr("src", "2.png")
             .end().end().children("p").css("opacity", "0.5");

             $('#commentweb').stop(true, true).fadeOut();
  }
);

http://jsfiddle.net/mMB3F/8/

kinakuta · Accepted Answer · 2012-08-26 08:18:00Z

1

You need to add an additional .end() in there if you want to get back to the original jquery object - each filtering action is putting a new jquery object on the stack - each call to .end() "pops" the last one off the stack. Here's an updated fiddle: http://jsfiddle.net/mMB3F/7/

answered Aug 26, 2012 at 8:18

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

Collectives™ on Stack Overflow

CSS property not working when chaining in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related