CSS div 定位辅助

Posted 2023-03-06

技术标签:

【中文标题】CSS div 定位辅助【英文标题】：CSS div positioning assistance 【发布时间】：2012-09-14 14:04:39 【问题描述】：

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

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

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

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

【问题讨论】：

【参考方案1】：

这是你想要得到的吗？

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

【讨论】：

是的！正是我想要得到的！介意给我们您对创建它的见解吗？我知道代码是不言自明的，但我也想听听其中的逻辑。非常非常感谢！主要问题是，一旦您离开工具提示区域，就会触发“unhover”（鼠标离开或其他）事件。如果显示来自框 1 的工具提示并且您将光标移动到框 2，则不会发生这种情况。光标仍位于工具提示上方。要将鼠标事件传递给下面的元素（框），您需要将 pointer-events: none 添加到工具提示中。框周围的包装是定位工具提示所必需的。它具有位置：相对，因此工具提示可以在该容器内具有绝对定位。向右扩展的工具提示具有样式“left: 0”，而向左扩展的工具提示具有样式“right: 0”。感谢您解释逻辑，非常简单但又聪明。我在 IE9 中浏览时遇到问题，工具提示 div 闪烁很多。也许 IE 有一个等价的指针事件？你说得对，IE9 不支持指针事件。您可以进行这样的解决方法：jsfiddle.net/xnrdp/3 将鼠标悬停在框上仅用于显示工具提示。如果鼠标离开工具提示区域，工具提示将关闭。在鼠标移动时，它会检查光标是否仍在“伙伴”上方。为了更容易理解，我在工具提示中添加了一个“for”属性，但您也可以通过其他方式找到匹配框。哦，你需要再次为工具提示启用指针事件；）【参考方案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 语句以考虑到这一点。

【讨论】：

虽然您的解决方案近乎完美，但还是有一个小问题。当您从 box1 转到 box2 时，box1 工具提示仍然可见，并且不会触发 box2 悬停。不过，我会赞成您的答案，这是一个非常好的答案。非常感谢。【参考方案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://***.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

【讨论】：

最好提一下:nth-of-type() 选择器对IE 的支持非常有限（IE9+）并且在Opera 中不能很好地工作。这里是a reference 对，我使用它的原因是因为如果添加新框而不是向 html 中的每第三/第四个框添加一个类，它会更容易从 CSS 本身控制可能很复杂。

以上是关于CSS div 定位辅助的主要内容，如果未能解决你的问题，请参考以下文章

CSS绝对定位：向右偏移15%+22px应该怎样写？

GPS 辅助定位

GPS 学习记录1——辅助定位

企业对前端开发人员有哪些要求？硬核技能+辅助要求缺一不可

核心定位和辅助 GPS iPhone