2

このレイアウトにいくつか問題があり、ホバー状態で表示されるリンクが表示されます!

これは、データを表示しているテーブル行のサンプルです...

<tr>
<td>
<div class="heightControl">
    <a href="#">data</a>
    <div class="logRemove"><a href="#" class="sremovelink"></a></div>
</div>
</td>
<td>12.14.09 / 12:38:00 AM</td><td>12.14.19 / 3:01:00 PM</td>
<td>Data</td>
</tr>

そしてジャバスクリプト！

$("tr a").hover(
  function(){$(this).siblings(".logRemove").fadeIn(100);},
  function(){$(this).siblings(".logRemove").fadeOut(100);}
);

ご覧のとおり、このように設定されているため、各行の「データ」リンクには、その行を削除するように設定された div リンクが表示されます。以前に hoverIntent を使用したことがありますが、使用しようとした方法では機能していないようです (以下)。

function remove4Display(){
  $(".logRemove").fadeIn(100);
}
function remove4Hide(){
  $(".logRemove").fadeOut(100);
}
$("tr a").hoverIntent(remove4Display, remove4Hide);

ただし、最初のスニペットのように一度に 1 つずつではなく、すべての行が一度にホバリングされていることを示しています。

結局のところ、大量のとりとめのない話の後、どのようにして hoverIntent をそのスニペット (または、おそらく私が忘れていたかもしれないスニペット) に統合して、このような状況にするのでしょうか?

どうもありがとう！

4

1 に答える 1

1

this次のように、そのコンテキストで引き続き使用できます。

function remove4Display(){
  $(this).siblings(".logRemove").fadeIn(100);
}
function remove4Hide(){
  $(this).siblings(".logRemove").fadeOut(100);
}
$("tr a").hoverIntent(remove4Display, remove4Hide);

または、無名関数でまったく同じ方法で使用します。

$("tr a").hoverIntent(function() {
  $(this).siblings(".logRemove").fadeIn(100);
}, function() {
  $(this).siblings(".logRemove").fadeOut(100);
});

これは依然としてハンドラーであり、thisホバーイン/アウトしている同じ要素を引き続き参照します。ショットでは.hoverIntent()、同じように使用してください.hover()。ただし、アニメーションのキューアップを避けるために.stop()、次のような高速ホバーをお勧めします。

$("tr a").hoverIntent(function() {
  $(this).siblings(".logRemove").stop().fadeIn(100);
}, function() {
  $(this).siblings(".logRemove").stop().fadeOut(100);
});
于 2010-07-18T20:37:19.683 に答える