js鼠标悬停显示文字实例
一、首先需要div布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js悬停</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>
四、实际代码在浏览器的渲染如下：
如<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、<title>JS教程:鼠标悬停时显示文字或显示图片</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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS教程:鼠标悬停时显示文字或显示图片</title>
<script language="javascript">
function showPic(sUrl){
var x,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.getElementById("Layer1").style.display = "block";
}
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
</script>
</head>
<body>
<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
<img src="#########" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" title="wowowowo" /> //此行title实现悬停时显示文字onmousemove实现显示图片
<p></p>
</body>
</html>
