html里图片上鼠标悬停就会有文字属于什么特效

html-css019

html里图片上鼠标悬停就会有文字属于什么特效,第1张

动画特效。html里图片上鼠标悬停就会有文字属于动画特效。鼠标悬停的意思是指当鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容弹出，档从这个图标、文字或者图片上移开鼠标后，弹出的内容自动缩回。

1、首先输入代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>鼠标悬停文字上显示图片</title>

2、然后输入代码：

<script language="javascript">

function showPic(e,sUrl){

var x,y

x = e.clientX

y = e.clientY

document.getElementById("Layer1").style.left = x+2+'px'

document.getElementById("Layer1").style.top = y+2+'px'

document.getElementById("Layer1").innerHTML = "

<img border='0' src=\"" + sUrl + "\">"

document.getElementById("Layer1").style.display = ""

}

3、然后输入代码：

function hiddenPic(){

document.getElementById("Layer1").innerHTML = ""

document.getElementById("Layer1").style.display = "none"

}

4、然后输入代码：

</script>

</head>

<body>

<div id="Layer1" style="display: none position: absolute z-index: 100">

</div>

<img src="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout="hiddenPic()"

onmousemove="showPic(this.src)" />

5、然后输入代码：

<p>

<a href="" onmouseout="hiddenPic()" onmousemove="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg')">

当鼠标指到标题时,鼠标显示对应图片</a>

</p>

</body>

</html>。

6、然后就完成了。