How to show a div when dynamically hovering a link?
I have different a
-tags that are dynamically generated. Each link will generate its own div
with different content, so each div
has individual content as well as individual height.
Now I would like to achieve this, when hover over a
, the match is shown div
. It div
should then appear at the mouse position and should be positioned from bottom to top to div
"grow up" because the links are on the bottom of the page.
This is what the code looks like ( $z
- counter):
<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>
I have read through different threads already but could not find the correct way to solve this problem. Thanks in advance.
source to share
Run snippet
This is the basic version of what you need. the animation obviously needs work, but should give you a good starting point.
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>
source to share
You will need to add your mouse cursor over your link event and then a javascript function to show your div in the right place. Then you will need a mouse to even hide the div again.
where i start is to change your PHP code:
<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>
Then add the javascript function:
<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>
source to share
I don't understand exactly how you want your preview to appear, but that should help you.
(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>
Also, don't put tags <li>
inside the anchor <a>
.
source to share
You can use CSS by placing div.preview
insidea.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>
source to share