jquery - CSS div 定位辅助

Question

我需要一些帮助来定位出现在每个#box 的悬停事件上的 div。隐藏的 div 应该以如下方式显示在悬停的框上：

1. 每个#tooltip div 都覆盖了悬停的框以及旁边的框
2. 框 1 和 2 的工具提示应覆盖右侧的框

3. 框 3 和 4 的工具提示应覆盖其左侧的框

   （为了更容易理解，请看附图
4. 会有几行框，所以定位应该是相对的，而不是固定到页面尺寸（我想）

到目前为止，我还没有设法让#tooltip 定位正确（我知道一个应该是绝对的，另一个应该是相对的，但无论我如何努力，我还没有确定它）。

这是一个要处理的jsfiddle，这是我追求的结果：

Answer 1

我整理了一个我认为可以完成您所描述的小提琴。

它背后的想法是我在盒子及其工具提示周围放置了一个包装器。然后我在包装器上监听鼠标悬停事件，而不是单独监听盒子和它的工具提示。这样我们就可以避免在显示工具提示时闪烁，从而覆盖最初悬停的元素。

使包装器位置相对可以相对于它绝对定位工具提示。在您的 jQuery 悬停回调中使用一个小的 if 语句，我们可以确定工具提示是否应该与框的左侧或右侧对齐。

如果小提琴由于某种原因会消失，请在答案中附加小提琴中的代码。

标记：

<div class="container">
    <div class="boxwrapper">
       <div id="box1" class="box">Box 1</div>
       <div id="tooltip1" class="tooltip">Description 1</div>
    </div>
    <div class="boxwrapper">
       <div id="box2" class="box">Box 2</div>
       <div id="tooltip2" class="tooltip">Description 2</div>
    </div>
    <div class="boxwrapper">
       <div id="box3" class="box">Box 3</div>
       <div id="tooltip3" class="tooltip">Description 3</div>
    </div>

    <div class="boxwrapper">
       <div id="box4" class="box">Box 4</div>
       <div id="tooltip4" class="tooltip">Description 4</div>
    </div>
    <div class="clearfix"></div>
</div>​

CSS：

.container {
    width: 450px;
    height: auto;
}

.box {
    background: #CCC;
    padding: 20px;
    float: left;
    height: 60px;
    width: 60px;
    list-style-type: none;
    margin: 5px;
    z-index: 1;
}
.tooltip {
    background: rgba(153,153,153,0.7);
    padding: 20px;
    height: 60px;
    width: 170px;
    margin: 5px;
    display:none;
    position: absolute;
    z-index: 2;
}
.clearfix {
    clear: both;
    float: none;
    height: 1px;
}
.boxwrapper {
    position: relative;
    float: left;
}

jQuery：

$(document).ready(function() {

    $(".boxwrapper").mouseenter(function() {
        var tooltip = $(".tooltip", this);
        tooltip.show();
        if ($(".boxwrapper").index(this) < 2) {
            tooltip.css("left", 0);
        } else {
            tooltip.css("right", 0);
        }
    });

    $(".boxwrapper").mouseleave(function(event) {
        $(".tooltip", this).hide();
    });

});  ​

更新：

如果您要在不止一排的盒子上使用它，您将不得不稍微改进 if 语句以考虑到这一点。

Answer 2

这就是你想要得到的吗？

http://jsfiddle.net/xnrdp/1/

Answer 3

您可以在 CSS 本身中执行此操作，使用“悬停”选择器和“nth-of-type”。

选择每第三行：

:nth-of-type(3), :nth-of-type(7), :nth-of-type(13), :nth-of-type(15)

和第四行：

:nth-of-type(4), :nth-of-type(8), :nth-of-type(12), :nth-of-type(16)

并赋予其飞出框必要的属性。

演示：http ://dabblet.com/gist/3765761

标记：

<div class='box'>1
    <div class='fly-out'></div>
</div>

<div class='box'>2
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>3
    <div class='fly-out'></div>
</div>
<div class='box right-aligned'>4
    <div class='fly-out'></div>
</div>

<div class='box'>5
    <div class='fly-out'></div>
</div>

<div class='box'>6
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>7
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>8
    <div class='fly-out'></div>
</div>

<div class='box'>9
    <div class='fly-out'></div>
</div>

<div class='box'>10
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>11
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>12
    <div class='fly-out'></div>
</div>

<div class='box'>13
    <div class='fly-out'></div>
</div>

<div class='box'>14
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>15
    <div class='fly-out'></div>
</div>
<div class='box right-aligned'>16
    <div class='fly-out'></div>
</div>

CSS：

* {
margin: 0; 
padding: 0; 
box-sizing: border-box; /* paulirish.com/2012/box-sizing-border-box-ftw/ */
position: relative; 
}

body {
    width: 440px;
    margin: 0 auto;
    }

.box {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    float: left;
    margin: 5px;
    }
    .fly-out {
        position: absolute;
        top: 0;
        background: rgba(0,0,0,.4);
        opacity: 0;
        z-index: -1;
        }
    .box:hover .fly-out {
        z-index: 1;
        opacity: 1;
        height: 100%;
        width: 210px;
        }
    .box:nth-of-type(3):hover .fly-out,
    .box:nth-of-type(7):hover .fly-out,
    .box:nth-of-type(11):hover .fly-out,
    .box:nth-of-type(15):hover .fly-out,
    .box:nth-of-type(4):hover .fly-out,
    .box:nth-of-type(8):hover .fly-out,
    .box:nth-of-type(12):hover .fly-out,
    .box:nth-of-type(16):hover .fly-out,

    .right-aligned {
        left: -110px;
        right: 0;
        background: rgba(0,0,120,.7);
        }

在您的标记中，“工具提示”位于框外，并且具有“可见性：隐藏”，这很像给它“不透明度：0”。虽然看不到，但它仍然存在。要真正使它对布局不可用，您需要“显示：无”，但是您将无法使用 CSS 转换正确地对其进行动画处理。

注意：就像下面评论中提到的 Christofer Eliason 一样，':nth-of-type' 选择器没有得到很好的支持，因此您可以为每个 div 添加一个类，以便让弹出窗口右对齐或查看使用 'nth-of-type' 的 jquery 版本：https ://stackoverflow.com/a/4761510/604040 。

我使用了 ':nth-of-type' 选择器，因为您可以从 CSS 本身控制飞出的对齐方式，如果它们是动态添加的，则无需将类添加到新框，这在数学上可能有点复杂（至少为了我）。

但是，如果您对此感到满意，我已经在每行的第 3 和第 4 框中添加了一个类“.right-aligned”，您可以在 CSS 中删除此块，您仍然很好：

.box:nth-of-type(3):hover .fly-out,
.box:nth-of-type(7):hover .fly-out,
.box:nth-of-type(11):hover .fly-out,
.box:nth-of-type(15):hover .fly-out,
.box:nth-of-type(4):hover .fly-out,
.box:nth-of-type(8):hover .fly-out,
.box:nth-of-type(12):hover .fly-out,
.box:nth-of-type(16):hover .fly-out