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

Question

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

现在，我希望在悬停a时显示匹配的div。 div然后应该显示在鼠标位置，并且应该从底部到顶部方向的位置，以便div在向上方向上生长＆＃34;因为链接位于页面的底部。

这是代码的样子（$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

运行代码段

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

＆＃13;

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在链接事件上添加鼠标，然后使用javascript函数在正确的位置显示div。然后你甚至需要一个鼠标来隐藏div。

我要开始的是将您的PHP代码更改为：

<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" 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;?>" style="display:none;">
    <?php echo $description_djv;?>
</div>

然后添加一个javascript函数：

    <script>
    function showDiv(counter) {
          document.getElementById('djvd_' + counter).style.display = 'block';
       // this is where you'd position your div location

    }


    function hideDiv(counter) {
         document.getElementById('djvd_' + counter).style.display = 'none';
     }
    </script>

Answer 3

我不明白您希望如何显示预览，但这对您有所帮助。

＆＃13;

＆＃13;

(function($) {
  var $currentElement;
  $('.rsshover').on('mouseenter', function(e) {
    $currentElement = $('#djvd_' + $(this).attr('id').substr(5));
    $currentElement.css({
      position: 'absolute',
      display: 'block',
      top: e.clientY + 'px',
      left: e.clientX + 'px'
    });
  }).on('mouseleave', function() {
    $currentElement.hide()
  })
})(jQuery)

＆＃13;

.preview {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="rsshover" id="djvl_1" target="_blank">
    <li>
        <p class="headline">Headline</p>
    </li>
</a>

<div class="preview" id="djvd_1">
    Description 1
</div>

＆＃13;

＆＃13;

＆＃13;

另外，请不要将<li>标记放在锚点<a>内。

Answer 4

您可以将div.preview放在a.rsshover

中来使用CSS

＆＃13;

＆＃13;

.rsshover .preview {
            display: none;
        }
        
        .rsshover:hover .preview {
            display: block;
        }

＆＃13;

<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">1</p>
    </li>
    <div class="preview">
        ONE
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">2</p>
    </li>
    <div class="preview">
        TWO
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">3</p>
    </li>
    <div class="preview">
        THREE
    </div>
</a>

＆＃13;

＆＃13;

＆＃13;