位置相对股利图标位置

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

问题：名称可以有不同的长度，我希望显示在V形下面的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它看起来像这样：

来源

2015-10-16 Schwesi

Woops，加入这个答案。 – klaar

如果我正确地理解了这个问题，你可以使用一个包装器（就像你一样）并使用'right：0;'而不是左边。它应该对齐到包装的右侧。 –

谢谢！但是那太过分了！而且我不能将名称的宽度设置为固定值，因为它的长度可能在2到64个字符之间。 – Schwesi

当图标悬停时，会有一个事件处理程序显示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>

我离开了标题编辑的，所以你可以把它再看到弹出的改变位置。

来源

2015-10-16 07:52:20

这真的很不错！有没有办法使用类而不是ID？因为我在foreach循环中使用我的代码。对不起，我对这一切都很陌生。 var chevron = document.getElementByClass（'chevron'）;？ – Schwesi

假设它是具有该类名称的文档中的第一个元素，可以使用document.querySelector（'。chevron'）通过类的元素来定位元素。 –

太棒了！谢谢！ – Schwesi

在.settings-bubble变化left: 0;到right: 0;，它会坚持到父，而不是内左内右侧。

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

来源

2015-10-16 07:37:57 klaar

我添加了一个小提琴！感谢您的所有努力！ – Schwesi

位置相对股利图标位置

回答

相关问题