Show Hide Div with pointer and focus events over link

HTML

<a href="../../index.php" data-preview="sub1">plus2net Home</a>
<div id="sub1" class="my_div">You are going to plus2net home page</div>

Style

<style>
.my_div { 
position: absolute; 
left: 500px; 
top: 100px; 
background-color: #306080; 
width: 280px; 
padding: 10px;
color: white; 
border: #0000cc 2px  dashed; 
display: none;
} 
</style>

JavaScript

document.querySelectorAll('[data-preview]').forEach((link) => {
  const panel = document.getElementById(link.dataset.preview);
  const show = () => panel.style.display = 'block';
  const hide = () => panel.style.display = 'none';
  link.addEventListener('pointerenter', show);
  link.addEventListener('pointerleave', hide);
  link.addEventListener('focus', show);
  link.addEventListener('blur', hide);
});