我有不同的 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>
我已经阅读了不同的主题,但无法找到解决此问题的正确方法。提前致谢。
最佳答案
运行片段
这是您需要的基本版本。显然动画需要工作,但应该给你一个很好的起点。
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>
关于javascript - 动态悬停链接时如何显示div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43595490/