将div相对于图标位置

Question

THE FIDDLE

当用户将鼠标悬停在我网站上某个名称旁边的人字形图标上时，会出现带有选项的div。

问题：名称可以有不同的长度，无论名称多长，我都希望在雪佛龙下面显示div。

这是我的代码：

的 HTML

$errorfile

SCSS

<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> 

我会非常感谢任何帮助!!

如果我将// 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，则看起来像这样：

Answer 1

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

编辑：诀窍是将包含气泡的div添加到包含任意长度的字符串的div中，并将该气泡附加到内部右侧，如this fiddle所示。< / p>

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>

我将标题编辑为可编辑，以便您可以延长标题并查看弹出式更改位置。