CSS div 定位辅助

Question

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

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

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

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

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

这是一个 jsfiddle 工作，这是我追求的结果：

Answer 1

这是你想要得到的吗？

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

Answer 2

我将a Fiddle 放在一起，我认为它可以完成您的描述。

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

使包装器的位置相对于它可以绝对相对于它定位工具提示。在您的 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 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