JQuery - 将 CSS 更改应用于类的单个元素

Question

如果已经有人提出类似的问题，我深表歉意。

我有一类链接，每个链接都有图像和文本。

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

当用户将鼠标悬停在这些链接之一上时，我想仅对图像应用旋转转换器。这给我带来了一个问题，因为我不能只使用 css 来执行此操作 - 如果我将 :hover {rotate} 应用于链接内的图像，那么只有当用户将鼠标悬停在图像上时才会出现这种效果，但是不是链接的其余部分。

我愚蠢地认为这些 JS 行会拯救我:

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

当然，问题是，当用户将鼠标悬停在单个链接上时，这会将转换器应用于整个类。此外，当用户停止将鼠标悬停在链接上时，更改不会逆转。

我已经开始 fiddle ，但不知道如何解决这个问题。任何帮助将不胜感激。

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

Answer 1

您需要应用于作为事件源的当前元素。

<强> Live Demo

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

fiddle 上的 html 中没有 img。