方框3＆amp;的工具提示4应覆盖左侧的方框

Question

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

每个#tooltip div都会覆盖悬停的框以及旁边的框
方框1＆amp;的工具提示。 2应覆盖右侧的方框
方框3＆amp;的工具提示4应覆盖左侧的方框
（为了使其更容易理解，请参阅附图）
会有几排盒子，所以定位应该是相对的，而不是固定在页面尺寸上（我猜）

到目前为止，我还没有设法使#tooltip定位正确（我知道一个应该是绝对的，另一个是相对的，但不管我的努力，我还没有把它钉住）。

这是一个jsfiddle工作，这是我之后的结果：

enter image description here

Answer 1

我把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 2

这是你想要得到的吗？

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

Answer 3

您可以使用'hover'选择器和'nth-of-type'在CSS本身中执行此操作。

选择每个第三行：

: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);
        }

在你的标记中，'工具提示'在框外，它有'visibility：hidden'，这就像给它'不透明度：0'。虽然它无法看到，它仍然存在。要让布局无法使用它，你需要'display：none'，但是你不能使用CSS转换来正确地设置动画。

注意：就像下面评论中提到的Christofer Eliason一样，'：nth-of-type'选择器不是很受支持，所以你可以为你想要的每个div添加一个类飞出要正确对齐或使用jquery版本的'nth-of-type'：https://stackoverflow.com/a/4761510/604040。

我使用了'：nth-of-type'选择器，因为你可以从CSS本身控制fly-out的对齐，而不必在新的框中添加一个类，如果它们是动态添加的，这在数学上可能有点复杂（至少对于我来说）。

但是如果你对它很好，我在第3和第3组的方框中添加了一个'.right-aligned'类。每行第4行，你可以在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

CSS div定位辅助

方框3＆amp;的工具提示4应覆盖左侧的方框

3 个答案: