ホバー上の要素を追加する/ jQuery

Question

divにマウスを置くと、divの最後にボックスを追加する必要があります。私が.myDivからtoitをロールバックしたときにdivを保持する必要があり、その内部または外部のどこかをクリックすると離れる必要がありますが、.myDivをクリックしないと離れる必要があります。また、私が.myDivからホバリングした場合、黄色のdivが閉じる必要があります。

var yHeight = $(".yDiv").height(); 

$(".myDiv").hover(
     function() { 
     $(this).append($("<div class="yDiv"> ... </div>")); 
     }, 
     function() { 
     $(this).find(".yDiv").remove(); 
     } 
); 


<div class="myDiv" style="width:100px">this is my div</div> 

<div class="yDiv" style="display:none;width:100px">this is my div</div> 

黄色のdivを中央に配置する必要があります。私はその後にホバーを適用する（したいなどのオブジェクトは、できるだけ多くのクラスを持つことができます）私はmydivの両方にと黄色のdivに新しいクラスを追加します

Answer 1

...私はそれの一部を得たと思いますあなたはmydivを離れると黄色のdivが消えてしまいます。次に、クリックハンドラをyDivクラスに追加して、それを消してください。少しjQueryと、このいくつかのCSSを使用して

$('.myDiv').addClass('tooltip'); 
$(".tooltip").hover(
    function() { 
     $('.myDiv').append($("<div class='yDiv tooltip' onclick='function(){$('.myDiv').find('.yDiv').remove();}()'> ... </div>")); 
    }, 
    function() { 
     $('.myDiv').find('.yDiv').remove(); 
    } 
); 

Answer 2

は非常に単純です：

JS通常

私は以下のクリックイベントを除いtoggleClass（）を使用するでしょう...

$("#myDiv").hover(
    function() { $(this).find(".yDiv").removeClass("hidden"); }, 
    function() { $(this).find(".yDiv").addClass("hidden"); 
}); 

$(".yDiv").click(function() { 
    $(this).addClass("hidden"); 
}); 

CSS

.yDiv { background: yellow; display: inline-block; position: absolute } 
.yDiv.hidden { display: none; } 

HTML

これは、オブジェクトが、私はあなたが追加したり削除している理由は全くわからないんだけど

<div id="myDiv"> 
    ... 
    <div class="yDiv hidden">...</div> 
</div> 

http://jsfiddle.net/hunter/R62U3/

Answer 3

をネストされているとき、はるかに容易になり、あなたがそれを隠しているだけのアイテムです。

コンテンツを一度.append()とし、ホバートリガー.hide()と.show()を持っています。ホバーごとにノードを削除して再作成するオーバーヘッドは、小さいながらは不要です。

$("#myDiv").append($('<div class="yDiv">'); 

$("#myDiv").hover(
    function() { $(".yDiv").show() }, 
    function() { $(".yDiv").hide() } 
);