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/dbudel/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 に答える