Question

以下div将在水平线上一个接一个地显示这三种语言，如英语西班牙语法语

<div>
  <ul style="display:inline;">
    <li><a href="#">English</a></li>
    <li><a href="#">Spanish</a></li>
    <li><a href="#">French</a></li>
  </ul>
</div>

当用户将鼠标悬停在英语上时，我希望以下div在英语下方浮动。但是如果用户移动到法语，那么这个div必须低于法语。问题是，我不能在上面的div中有以下div。

<div>
  <ul>
    <li>News</li>
    <li>Sports</li>
  <ul>
</div>

怎么做？我尝试了一些解决方案，但都没有效果。

Answer 1

Element.getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置。 MDN Web Docs

现在您拥有所选元素的位置。

更进一步，你可以获得要浮动的元素高度，并将该高度添加到悬停元素中，以便为它腾出空间。

const x = document.querySelector('#lol')
const y = document.querySelectorAll('.li')

y.forEach(li => li.addEventListener('mouseover', float, false))
y.forEach(li => li.addEventListener('mouseleave', removeFloat, false))

function float(e) {
	if(e.target.tagName !== 'LI') return
  
	const foo = e.target.getBoundingClientRect()
  e.target.style.marginBottom = x.offsetHeight + 'px'

  x.style.top = foo.bottom + 'px'
}

function removeFloat(e) {
	if(e.target.tagName !== 'LI') return
  
  e.target.style.marginBottom = 0
}

<div>
  <ul style="display:inline;">
    <li class="li">
      <a href="#">English</a>
     </li>
    <li class="li"><a href="#">Spanish</a></li>
    <li class="li"><a href="#">French</a></li>
  </ul>
</div>

<div style="position: absolute;" id="lol">
  <ul style="margin: 0; padding: 0;">
    <li>News</li>
    <li>Sports</li>
  </ul>
</div>

如何将单个div设置为另一个div中的任何悬停链接？

1 个答案: