Question

如果已经提出类似的问题，我很抱歉。

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

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

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

我愚蠢地认为这些JS线会救我：

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

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

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

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

Answer 1

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

<强> Live Demo

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

你没有img in the hiddle。

Answer 2

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

为你的小提琴：

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

查看更新的fiddle

Answer 3

其他答案涵盖JS / jQuery解决方案，但如果您有正确的选择器，可以只使用CSS执行此操作：

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

也就是说，作为.square元素后代的任何a.link元素都会被应用。

演示：http://jsfiddle.net/z38EE/4/

Answer 4

您需要将变换应用于作为当前目标后代的正方形：

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

以下是演示：http://jsfiddle.net/ye4tk/

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

4 个答案: