0

.insertAfterの効果を理解するために、2 行 2 列の小さなテーブル テストを設計しました。

 <table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
        <tr>
          <td title="row 1*1" class="styletest">1*1</td>
          <td title="row 1*2" class="styletest">1*2</td>
        </tr>
        <tr>
          <td title="row 2*1" class="styletest">2*1</td>
          <td title="row 2*2" class="styletest">2*2</td>
        </tr>
     </table>

jquery コードは次のとおりです。

var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.

function showTooltip(cell) {
    $tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
    showTooltip($(this));
 }, function() {
    $tooltip.hide();
 });

テストには、さまざまなセルのホバリングとツールチップの表示が含まれます。デモはjsfiddle にあります。

別のセルにカーソルを合わせたときのソース コードを知りたい。たとえば、行 1、列 1 にカーソルを合わせると、スナップショットは次のよう になります。行1列1 行 2、列 2 にカーソルを合わせると、スナップショットは次のようになります。 行2列2

質問: マウスが行 1 列 1 と行 2 列 2 にホバーするとき。

  1. レンダリングされたソース コードは同じですか? (ホバリング時に F12 を使用してもレンダリングされたコードを取得できません)
  2. ツールチップが真ん中に見えるのと同じ位置に表示されるのはなぜですか?
4

2 に答える 2

0

それは同じ要素です。コンテンツと可視性を変更しているだけです。移動することはありませんし、マークアップで設定しているコンテンツ以外も text()変更されることはありません。

何も検査する必要はありません。ソース コードはスクリプトのすぐそこにあり、いわば挿入したものが得られます。

于 2012-07-28T19:57:15.353 に答える
0

hoverfirebugでのみ適用される要素のスタイルを調べることができます。

ホバー スタイルを持つ要素を調べ、DOM ノードをクリックして選択し、青色で強調表示します。次に、右側のスタイル タブに移動し、小さな矢印をクリックして、:hoverFirefox がホバー スタイルを保持し、下部の div を挿入できるようになりましたを選択します。

ここに画像の説明を入力

あなたの場合、#tooltipテキストを中央揃えにするためのCSSまたはdivのスタイルがあります。

于 2012-07-28T20:12:29.253 に答える