如何在动态悬停链接时显示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>

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

我不明白究竟如何你希望你的预览被显示，但这应该对你有帮助。

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

.preview { 
 
    display: none; 
 
}

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

而且，请不要把<li>标签内锚<a>。

Answer 4

您可以通过将div.preview的a.rsshover

内

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

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

使用CSS