javascript - 动态悬停链接时如何显示div？

Question

我有不同的 a - 动态生成的标签。每个链接都会生成一个包含不同内容的自己的 div，因此每个 div 都有单独的内容和单独的高度。

现在我想实现的是，当鼠标悬停在 a 上时，将显示匹配的 div。然后 div 应该显示在鼠标位置，并且应该从下到上定位，这样 div 就会“向上增长”，因为链接位于页面底部。

代码如下($z 是一个计数器):

<a href="<?php echo $link_djv;?>" class="rsshover" id="djvl_<?php echo $z;?>" target="_blank">
    <li>
        <p class="headline"><?php echo $title_djv;?></p>
    </li>
</a>

<div class="preview" id="djvd_<?php echo $z;?>">
    <?php echo $description_djv;?>
</div>

我已经阅读了不同的主题，但无法找到解决此问题的正确方法。提前致谢。

Answer 1

运行片段

这是您需要的基本版本。显然动画需要工作，但应该给你一个很好的起点。

class ToolTipControl {
  constructor () {
    this.xCoordinate;
    this.yCoordinate;
    this.links = document.querySelectorAll('a');
    this.addEventListeners();
    this.activeLink = false;
  }
  
  addEventListeners () {
    for (let link of this.links) {
      link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
      link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
    }
    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
  }
  
  handleMouseMove (event) {
    this.xCoordinate = event.pageX; 
    this.yCoordinate = event.pageY;
    
    if (this.activeLink) {
      this.activeLink.style.top = `${this.yCoordinate}px`;
      this.activeLink.style.left = `${this.xCoordinate}px`;
    }
  }
  
  handleMouseEnter (event) {
    this.activeLink = event.target.nextElementSibling;
    this.activeLink.style.maxHeight = '50px';
  }
  
  handleMouseLeave (event) {
    let targetsContent = event.target.nextElementSibling;
    targetsContent.style.maxHeight = 0;
    this.activeLink = false;
  }
  
}

new ToolTipControl();

.preview {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

li {
  list-style: none;
}

a {
  padding: 20px;
  margin: 20px;
  color: white;
  display: block;
  background-color: grey;
  width: 100px;
}

<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 3
</div>