Position div 相对于图标位置

Question

当用户将鼠标悬停在我网站上名称旁边的 V 形图标上时，会出现 div 和选项。

问题：名称可以有不同的长度，无论名称有多长，我都想在人字形下方显示 div是。

这是我的代码：

HTML

<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
    <ul class='settings-bubble'>
        <li>Bearbeiten</li> 
        <li>Löschen</li>
    </ul>
</div>

SCSS

// The chevron icon 
.settings {
    display: inline;
    position: relative;
    padding: .1em 0 0 .5em;
    opacity: 0; // I display the chevron on hover using jquery
}

// The options bubble
.settings-wrapper { 
    position: relative; 
}

.settings-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 .6em;
    opacity: 0;
    z-index: 9999;
    li {
        position: relative;
        display: block;
        a { float: left; }
    }
}

如果有任何帮助，我将不胜感激！！

如果我将 left: 0 更改为 right: 0，它看起来像这样：

Answer 1

在 .settings-bubble 中将 left: 0; 更改为 right: 0; 它将粘在父级的内部右侧而不是内部左侧。

编辑：诀窍是将包含气泡的 div 添加到包含任意长度字符串的 div 中，并将 div 内的气泡附加到内部右侧-手边，如 this fiddle.

所示

Answer 2

当图标悬停时，有一个显示 div 的事件处理程序。在该处理程序中，您可以检查图标的 x 和 y 坐标。当你显示 div 时，你可以修改它的样式以相对于图标定位。例如：

var chevron = document.getElementById('chevron');
var popup = document.getElementById('popup');

chevron.addEventListener('mouseover', function(e) {
  popup.classList.remove('hidden');
  popup.style.left = e.target.offsetLeft + 'px';
});

chevron.addEventListener('mouseout', function(e) {
  popup.classList.add('hidden');
});

.hidden {
  display: none;  
}

#popup {
  position: absolute;
  border: 1px solid #000;
}

<h1 contenteditable="true">Some long title <span id="chevron">></span></h1>

<div id="popup" class="hidden">popup</div>

我保留了标题的可编辑性，这样您可以将其延长并查看弹出窗口更改位置。

Position div 相对于图标位置

Position div relatively to icon position

javascript

css

jquery

sass

css-position