1

如果已经问过类似的问题，我深表歉意。

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

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

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

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

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

4

4 回答 4

2

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

现场演示

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

您在小提琴的 html 中没有 img 。

于 2013-01-09T07:27:03.560 回答
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)'
  });
});

查看更新的小提琴

于 2013-01-09T07:27:43.683 回答
2

其他答案涵盖了 JS/jQuery 解决方案，但如果你有正确的选择器，你可以只用 CSS 来做到这一点：

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

也就是说，作为悬停.square元素的后代的任何元素都a.link将应用该样式。

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

于 2013-01-09T07:32:15.750 回答
1

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

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

这是一个演示：http: //jsfiddle.net/ye4tk/

于 2013-01-09T07:29:50.750 回答