javascript - 我如何创建一个链接，以便每当我将鼠标悬停在链接上时，一个 DIV(带有文本)出现在鼠标指针的右侧？

Question

我想要一个链接，这样每当鼠标悬停在链接上时，包含单行文本的 DIV 元素就会出现在鼠标指针的右侧，这是我目前所拥有的，但它看起来并不接近鼠标指针的右边，请看我的jsfiddle链接https://jsfiddle.net/ad2xbxwq/这是我使用的示例 html 代码

<span>
<a href="html_images.asp" >HTML Images</a>  <br>
<a href="www.google.com" >GOOGLE</a> 
</span>

<div class="example">I will show on hover</div>

Answer 1

如果您不是在寻找工具提示，而是在悬停时出现在 div 旁边的 div

#example{
background-color: blue;
padding: 20px;
display: none;
position: absolute;
left: 250px;
top: 10px;
width: 200px;

}


span:hover + div {
  display: inline;
}

查看此 jsfiddle https://jsfiddle.net/66roekmh/