本文目录一览：
- 1、JS中如何实现鼠标悬停在按钮上显示文字
- 2、js鼠标悬停显示文字实例
- 3、用javascript 当鼠标移动到任意文字上弹出框显示文字内容，不是加title属性
- 4、js鼠标移动至图片上，出现文字鼠标移开文字隐藏代码
- 5、js鼠标悬停显示文字的实例介绍？
JS中如何实现鼠标悬停在按钮上显示文字
不用JS事件，如果只是简单文字的话给标签加title属性就OK了例：input type="button" title="你要的文字" /
js鼠标悬停显示文字实例
一、首先需要div布局：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titlejs悬停/title
style type="text/css"
p {
width: 200px;
height: 200px;
background-color: skyblue;
text-align: center;
line-height: 200px;
}
/style
/head
body
p id="txt"我是一个DIV/p
script type="text/javascript"
var txt = document.getElementById('txt');
txt.setAttribute("title","鼠标悬停了");
/script
/body
/html
二、div实在的在开发工具里面的代码效果如下截图：
三、这段代码最主要的重点是如下：
script type="text/javascript"
var txt = document.getElementById('txt');
txt.setAttribute("title","鼠标悬停了");
/script
四、实际代码在浏览器的渲染如下：
用javascript 当鼠标移动到任意文字上弹出框显示文字内容，不是加title属性
(function (document) {
var ttel = document.createElement('span');
ttel.style.position = 'absolute';
ttel.style.boder = '1px solid #e1dec9';
ttel.style.backgroundColor = '#eae9e3';
ttel.style.left = '0px';
ttel.style.top = '0px';
ttel.style.fontSize = '8pt';
ttel.style.padding = '2px 4px 2px 4px';
ttel.style.zIndex = 9999999;
document.body.appendChild(ttel);
function showTooltip(e) {
console.log(e)
ttel.innerHTML = this.innerText || this.textContent || this.value;
ttel.style.left = (e.pageX + 10) + 'px';
ttel.style.top = (e.pageY + 10) + 'px';
ttel.style.display = 'block';
return false;
}
function hideTooltip(e) {
ttel.style.display = 'none';
ttel.innerHTML = '';
return false;
}
function isTextNode(el) {
var children = el.children;
if (el.childElementCount == 0)
return true;
for (var i = 0; i children.length; i++) {
el = children[i];
var text = ((typeof el.innerText !== 'undefined' el.innerText != '') ? el.innerText : el.textContent) || el.value;
if (text)
return false;
}
return true;
}
function bindEvent(el) {
var children = el.children;
if (children.length == 0 || isTextNode(el)) {
var text = ((typeof el.innerText !== 'undefined' el.innerText != '') ? el.innerText : el.textContent) || el.value;
if ((typeof text !== 'undefined' text != '')) {
if (el.attachEvent) {
el.attachEvent('onmouseover', showTooltip);
el.attachEvent('onmouseout', hideTooltip);
} else if (el.addEventListener) {
el.addEventListener('mouseover', showTooltip);
el.addEventListener('mouseout', hideTooltip);
}
}
} else {
for (var i = 0; i children.length; i++) {
if (children[i])
bindEvent(children[i]);
}
}
}
var el = document.body;
bindEvent(el);
})(document);
js鼠标移动至图片上，出现文字鼠标移开文字隐藏代码
直接利用css就能办到鼠标移上去显示 离开隐藏的效果：
style
#aa{position:relative;width:300px; height:200px;}
#aa img{display:block;width:100%;height:100%;}
#aa span{display:none;}
#aa:hover span{position:absolute;left:0;bottom:0;display:block;width:100%;height:30px; line-height:30px;text-align:center; color:#eee;}
/style
JS写法：
script
window.onload = function(){
var box = document.getElementById('aa');
box.onmouseover = function(){
this.getElementsByTagName('span')[0].style.display = 'block';
}
box.onmouseout = function(){
this.getElementsByTagName('span')[0].style.display = 'none';
}
}
/script
div id="aa"
img src="" /
span文字内容/span
/div
js鼠标悬停显示文字的实例介绍？
如meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
1、html
2、head
3、meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
4、titleJS教程:鼠标悬停时显示文字或显示图片/title
5、script language="javascript"
6、functionshowPic(sUrl{varx,y;x=event.clientX;y=event.clientY;document.getElementById("Layer1").style.left=x;document.getElementById("Layer1").style.top=y;document.getElementById("Layer1").innerHTML = "img src=\"" + sUrl + "\""; document.g
7、function hiddenPic(){ document.getElementById("Layer1").innerHTML = ""; document.getElementById("Layer1").style.display = "none"; }
8、/script
9、/head
10、body
11、div id="Layer1" style="display:none;position:absolute;z-index:1;"/div
12、img src="#########" onmouseout="hiddenPic();"
13、onmousemove="showPic(this.src);" title="wowowowo" / //此行title实现悬停时显示文字onmousemove实现显示图片
14、p/p
15、/body
16、/html
