代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张，小jpg 大jpg
效果如下图：当鼠标悬停在小上面的时候，会显示大；鼠标移出，隐藏大。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<!doctype html><html>
<head>
<meta charset=utf-8>
</head>
<body>
你要显示特效的html
<img src="小jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />
<div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" >
大显示如下
<img src="大jpg" width="500px" height="300px" id="bigimg" />
</div>
<script type="text/javascript">
let divHover = documentgetElementById("divHover");
function hoverShowDiv() {
consolelog("显示大");
divHoverstyledisplay = "block";
divHoverstyletop = documentgetElementById("littleimg")styletop + 10;
divHoverstyleleft = documentgetElementById("littleimg")styleleft + 10;
}
function hoverHiddendiv() {
consolelog("显示小");
divHoverstyledisplay = "none";
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
<HTML>
<meta >
a{color: #0162f4;}
鼠标离开的时候颜色为蓝色，#0162f4颜色代码自己改
a:hover{text-decoration:underline;color: #C20C0C;}
鼠标经过的时候出现下划线text-decoration:underline，不要下划线改成text-decoration:none即可，color: #C20C0C为鼠标经过时字体显示的颜色！
<TABLE >
<TR >
<TD border="1px solid teal" id ="边框" onclick="javascript:documentall('边框')styleborder='1px solid red';"> \\此句代码写在文文框是一样的，只需要替换id即可；
<TD>
<TR>
</TABLE>
你随便弄个网页
以下代码插入<head>标签之内，保存预览，就可以看到很漂亮的文字环绕鼠标：
<SCRIPT
LANGUAGE="JavaScript">
if
(documentall)
{
yourLogo
=
"我想有个家一个温暖的家";
//自己根据要求设置//
logoFont
=
"宋体";
logoColor
=
"#00ccff";
yourLogo
=
yourLogosplit('');
L
=
yourLogolength;
TrigSplit
=
360
/
L;
Sz
=
new
Array()
logoWidth
=
100;
logoHeight
=
-30;
ypos
=
0;
xpos
=
0;
step
=
003;
currStep
=
0;
documentwrite('<div
id="outer"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
0;
i
<
L;
i++)
{
documentwrite('<div
id="ie"
style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:left">'+yourLogo[i]+'</div>');
}
documentwrite('</div></div>');
function
Mouse()
{
ypos
=
eventy;
xpos
=
eventx
-
5;
}
documentonmousemove=Mouse;
function
animateLogo()
{
outerstylepixelTop
=
documentbodyscrollTop;
for
(i
=
0;
i
<
L;
i++)
{
ie[i]styletop
=
ypos
+
logoHeight
Mathsin(currStep
+
i
TrigSplit
MathPI
/
180);
ie[i]styleleft
=
xpos
+
logoWidth
Mathcos(currStep
+
i
TrigSplit
MathPI
/
180);
Sz[i]
=
ie[i]stylepixelTop
-
ypos;
if
(Sz[i]
<
5)
Sz[i]
=
5;
ie[i]stylefontSize
=
Sz[i]
/
17;
}
currStep
-=
step;
setTimeout('animateLogo()',
20);
}
windowonload
=
animateLogo;
}
</script>
以上就是关于鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片全部的内容，包括:鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片、这种模板请问用CSS怎么做 鼠标经过这个DIV会有一个边框、求html中导航栏鼠标划过的jQuery特效，代码越简单越好，就是给li换背景等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）