基本的なjQueryのドロップダウン

Question

私はjqueryを初めて使っていますので、私の無知を許してください。私は削除ボタンを作成しようとしています。ユーザが削除ボタンの上を移動すると、キャンセルボタン（確認を非表示にする）または続行（いくつかのコードを実行する）のいずれかの小さな確認が表示されます。

私は、ユーザーが削除リンクの上に置いたときに、それは確認を表示するために取得することができたが、（彼らは確認メッセージの上にマウスを置くと）ユーザーは、リンクの外へマウスを移動したとき、それは消え

ここに私がこれまで持っていたもののjsfiddleがあります。

Answer 1

ルック：

http://jsfiddle.net/ahallicks/KgtF2/4/

余白はオーバーラップを確認することです。.linksのクラスがdeleteLinkクラスと同じになるようにしてください:-)

Answer 2

リンクと対応するdivを別のdivコンテナにラップしてから、親コンテナにホバーイベント処理を割り当てます。

<div id="deleteContainer"> 
    <a href="#" class="deleteLink">Delete</a> 
    <div class="hidden links"> 
      Are you sure?<br /> 
      <a href="#">Yes</a> | 
      <a href="#">No</a> 
    </div> 
</div> 

とJS：

$(document).ready(function() { 
    $("#deleteContainer").hover(

    function() { 
     $(".links").removeClass("hidden").addClass("shown"); 
    }, function() { 
     $(".links").removeClass("shown").addClass("hidden"); 
    }); 
}); 

実施例：http://jsfiddle.net/KgtF2/1/

Answer 3

コンテナ内のhtmlをラップし、コンテナにホバー機能を追加するなどの

何か。

の作業例：http://jsfiddle.net/KgtF2/2/

HTML

<div id="container"> 
<a href="#" class="deleteLink">Delete</a> 
       <div class="hidden links"> 
         Are you sure?<br /> 
         <a href="#">Yes</a> | 
         <a href="#">No</a> 
       </div> 
</div> 

JS：この時

$(document).ready(function(){ 
       $("#container").hover(
        function(){ 
         $(".links").removeClass("hidden").addClass("shown"); 
        }, 
        function(){ 
         $(".links").removeClass("shown").addClass("hidden"); 
        }); 
      });