如何创建链接,以便每当我将鼠标悬停在链接上时,鼠标指针右侧会出现DIV(带文本)?

时间:2016-04-30 18:53:56

标签: javascript jquery html css

我希望有一个链接,这样每当鼠标悬停在链接上时,鼠标指针右侧会出现一个包含单行文本的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>

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

您可以使用位置CSS来满足您的要求。

Here就是一个例子:

<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>