首先需要找到这段字所在的标签，(如<p>标签)
之后设置当鼠标悬浮在该标签上时的样式,在css样式表中声明选择器 标签:hover(如p:hover)
x:hover为伪类样式，hover表示鼠标悬浮在这一标签上时
最后在{}中添加设置字体大小、颜色的代码(如 color:red)
超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
我做的全部在下面 ，自己看看，不懂的在问问我<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>字符跟随鼠标</TITLE>
<style type="text/css">
.spanstyle {COLOR: #ffd8ffFONT-FAMILY: 宋体FONT-SIZE: 10ptPOSITION: absoluteTOP: -50pxVISIBILITY: visible}
</style>
<script>
var x,y
var step=18
var flag=0
// Your snappy message. Important: the space at the end of the sentence!!!
var message="★讯易自助建站平台欢迎你的光临!"
message=message.split("")
var xpos=new Array()
for (i=0i<=message.length-1i++)
{xpos[i]=-50}
var ypos=new Array()
for (i=0i<=message.length-1i++)
{ypos[i]=-200}
function handlerMM(e)
{x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() {
if (flag==1 &&document.all) {
for (i=message.length-1i>=1i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0i<message.length-1i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 &&document.layers) {
for (i=message.length-1i>=1i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0i<message.length-1i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
</script>
</HEAD>
<BODY bgcolor="#f2f2f2" onload="makesnake()">
<script>
<!-- Beginning of JavaScript -
for (i=0i<=message.length-1i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE)
}
document.onmousemove = handlerMM
// - End of JavaScript - -->
</script>
</BODY>
</HTML>
我的邮箱地址:[email protected]
通过css伪类中的“hover”来实现。
1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：
2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p {display: none}”；再给div设置宽和高，这里为了演示方便，为div设置一个灰色的背景色，代码为“div {width: 100pxheight: 100pxbackground: #ccc}”：
3、给div标签添加hover伪类，然后打出一个空格，再设置此时p标签的显示样式。代码为“div:hover p {display: block}”，这段代码的意思是，当鼠标放在div上时，将p标签的显示状态从隐藏改成显示，此时p标签中的文字就会显示出来：
4、当鼠标从div移走时，文字就会消失：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）