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)
可以事先写一个输入框，默认是隐藏的，当你单击的时候直接让它显示。
<!-- HTML --><div>
<span onclick='reply()'>回复我!</span>
<input style='display: none' id='reply' />
</div> // JavaScript
function reply() {
document.getElementById('reply').style.display = 'block'
}
如<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
1、<html>
2、<head>
3、<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
4、<title>JS教程:鼠标悬停时显示文字或显示图片</title>
5、<script language="javascript">
6、functionshowPic(sUrl{varx,yx=event.clientXy=event.clientYdocument.getElementById("Layer1").style.left=xdocument.getElementById("Layer1").style.top=ydocument.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:noneposition:absolutez-index:1"></div>
12、<img src="#########" onmouseout="hiddenPic()"
13、onmousemove="showPic(this.src)" title="wowowowo" /> //此行title实现悬停时显示文字onmousemove实现显示图片
14、<p></p>
15、</body>
16、</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）