ハイパーリンクマウスプロンプトを実現するための JQuery メソッドeffect_jquery

この記事の例では、JQuery がハイパーリンクのマウス プロンプト効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ブラウザには、実際にはハイパーリンク プロンプトがすでに付属しています。ハイパーリンクに title 属性を追加するだけです。ただし、このプロンプトエフェクトの応答速度は非常に遅く、1秒程度の遅延があります。ここで必要なのは、マウスがハイパーリンクに移動した瞬間にプロンプ​​トを表示することです。このとき、aタグ内のタイトルプロンプト効果を削除し、同様の機能を持つプロンプトを自分で作成する必要があります。

HTML のデザインは次のとおりです:

次に、クラス ツールチップを使用してハイパーリンクのマウスオーバー イベントとマウスアウト イベントを追加します。

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

この効果を実現するための具体的なアイデアは次のとおりです:

1. マウスをハイパーリンク内にスライドすると、div 要素が作成され、div 要素の内容が title 属性の値になります。作成された要素はドキュメントに追加されます。マウス位置の隣に表示されるように、x 座標と y 座標を設定します。
2. マウスをスライドさせてハイパーリンクから外したら、div 要素を削除します。

分析のアイデアに従って、次の JQuery コードを作成します。

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素  
    $("body").append(tooltip); //把它追加到文档中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //设置x坐标和y坐标，并且显示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

現時点でのエフェクトには 2 つの問題があります。1 つは、マウスをスライドさせると、a タグの title 属性のプロンプトも表示されることです。2 つ目は、x 座標と y 座標の設定の問題です。自作プロンプトとマウスの距離が近すぎると、プロンプトが表示されなくなる（マウスフォーカスの変更によりマウスアウトイベントが発生する）などの問題が発生する場合があります。

a タグのタイトルプロンプト機能を削除するには、次の手順を実行する必要があります:

1. マウスをスライドインすると、オブジェクトに新しい属性を追加し、この属性に title の値を渡し、属性 title の値をクリアします。

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. マウスをスライドさせると、オブジェクトの myTitle 属性の値が属性 title に割り当てられます。

マウスをスライドさせたときに属性値を属性タイトルに割り当てる必要があるのはなぜですか?マウスがスライドアウトしたときに、再度スライドインしたときの title 属性の値を考慮する必要があるため、myTitle の値が title 属性に再割り当てされていない場合、マウスが再びスライドインしたときに title の値が空になります。

2 番目の問題を解決するには、プロンプト要素の上と左の値をリセットする必要があります。コードは次のとおりで、上に 10 ピクセル、左に 20 ピクセルを追加します。

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});