位置相對股利圖標位置

當用戶將鼠標懸停在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

位置相對股利圖標位置

回答

相關問題