如何在動態懸停鏈接時顯示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