关于鼠标移动在文字上面，让其显示详细信息的代码方法

2017-11-20 23:09| 发布者: 大师兄| 查看: 669| 评论: 0

摘要: 今天小编收到一个客户这样的提问，我将鼠标移动在一段文字上面，然后显示一段文字的详细信息，该怎么实现呢，小编推荐了如下的代码，可以直接用来使用哦把下面的代码保存成一个html文件，用浏览器打开试试：scriptfu ...

今天小编收到一个客户这样的提问，我将鼠标移动在一段文字上面，然后显示一段文字的详细信息，该怎么实现呢，

小编推荐了如下的代码，可以直接用来使用哦

把下面的代码保存成一个html文件，用浏览器打开试试：

function showTooltip(target) {

document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'block';

}

function hideTooltip(target) {

document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'none';

}

</script>

<label onmouseover='showTooltip(this);' onmouseout='hideTooltip(this);' id='label0'>把鼠标移到我上面看看...</label>

<div id='tooltip0' style='display:none;border:1px solid gray;background-color:yellow;color:blue;'><p>这是一段文字的详细信息。。。</p></div>

这样就可以了，当然我们也可以利用title来实现，大家可以参考如下内容

html如何实现鼠标悬停显示文字，鼠标移走文字消失的具体方法

上一篇：html如何实现鼠标悬停显示文字，鼠标移走文字消失的具体方法下一篇：鼠标移动在文字上面，让其显示详细信息的html代码