使用/ jQuery在悬停时添加元素

Question

当我将鼠标悬停在div上时，我需要在div的末尾添加一个框。当我从.myDiv滚动时，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。我想我得到了一些......

Answer 1

使用一点点jQuery和一些css这很简单：

<强> 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 2

我不完全确定你为什么要在隐藏它时添加和删除项目。

我会.append()内容一次，然后悬停触发器.hide()和.show()。为每个悬停移除和重新创建节点的开销是 - 虽然很小 - 不必要。

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

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

Answer 3

我会向mydiv和黄色div添加一个新类（对象可以包含任意数量的类）然后将悬停应用于该类，因为当你离开mydiv时黄色div将消失。然后只需向yDiv类添加一个单击处理程序，使其消失。

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