JQuery - apply CSS change to single element of a class

Question

My apologies if a similar question has already been asked.

I've got a class of links, each with an image and text.

<a class="link">
   <img src="//filepath">
  link text
</a>

When the user hovers over one of these links, I'd like to apply a rotate transformer to the image only. This presents me with a problem, because I can't just use css to execute this -- if I apply :hover { rotate } to the images within the link, then this effect will only occur when the user hovers over the image, but not the rest of the link.

I foolishly thought these lines of JS would save me:

    $('a.link').hover(function(){
     $('a.link img').css(
       {'-webkit-transform':'rotate(40deg)'}
     );
   });

Of course, the problem is, this applies the transformer to the entire class when the user hovers over a single link. Also, the change doesn't reverse when the user stops hovering over the link.

I have started a fiddle, but am at a loss of how to solve this. Any help would be greatly appreciated.

http://jsfiddle.net/dbudell/z38EE/

Adil · Accepted Answer · 2013-01-09 07:27:03Z

2

You need to apply on current element that is event source.

Live Demo

$('a.link').hover(function () {
  $(this).find('.square').css({
    '-webkit-transform': 'rotate(40deg)'
  });
});

You do not have img in the html on fiddle.

answered Jan 9, 2013 at 7:27

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adil Over a year ago

You do not have img in the html on fiddle, now I have used element with square class.

Anujith · Accepted Answer · 2013-01-09 07:27:43Z

2

$('a.link').hover(function(){
   $(this).find('img').css(
   {
     '-webkit-transform':'rotate(40deg)'
   });
});

And for your fiddle:

$('a.link').hover(function(){
 $(this).find('.square').css(
   {'-webkit-transform':'rotate(40deg)'
  });
});

See updated fiddle

answered Jan 9, 2013 at 7:27

Anujith

9,3686 gold badges36 silver badges48 bronze badges

Comments

nnnnnn · Accepted Answer · 2013-01-09 07:32:15Z

2

The other answers cover the JS/jQuery solution, but you can do this with just CSS if you have the right selector:

a.link:hover .square {
  -webkit-transform:rotate(40deg);
}

That is, any .square elements that are descendants of a.link elements being hovered will have that style applied.

Demo: http://jsfiddle.net/z38EE/4/

answered Jan 9, 2013 at 7:32

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

1 Comment

user1726343 Over a year ago

Definitely the most efficient approach.

user1726343 · Accepted Answer · 2013-01-09 07:29:50Z

1

You need to apply the transform to the square that is a descendant of the current target:

$('a.link').hover(function(){
    $('.square', this).css(
        {'-webkit-transform':'rotate(40deg)'}
    );
},
function(){
    $('.square', this).css(
        {'-webkit-transform':'rotate(40deg)'}
    );
});

Here is a demonstration: http://jsfiddle.net/ye4tk/

answered Jan 9, 2013 at 7:29

user1726343

1 Comment

Daniel Bogre Udell Over a year ago

Thanks Asad! This answers my JS question but I agree with your above comment that the CSS-only solution, of which I was unaware, is the most efficient :)

Collectives™ on Stack Overflow

JQuery - apply CSS change to single element of a class

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related