javascript - 相对于图标位置定位 div

Question

THE FIDDLE

当用户将鼠标悬停在我网站上名称旁边的 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

当图标悬停时，有一个显示 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>

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