鼠标经过链接文本内容滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/ddxg258/article/details/5848840

这篇博客介绍了如何实现鼠标经过链接时，内容区域产生滚动效果。通过CSS样式定义了不同状态下的链接颜色和行为，并使用JavaScript实现了上下滚动功能。当鼠标悬停在链接上时，内容区域会按照设定的方向和速度滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<mce:style></mce:style><style mce_bogus="1">BODY { FONT-SIZE: 9pt; COLOR: #333333 } DIV { FONT-SIZE: 9pt; COLOR: #333333 } TD { FONT-SIZE: 9pt; COLOR: #333333 } A:link { FONT-SIZE: 9pt; COLOR: #3366cc; LINE-HEIGHT: 13pt; TEXT-DECORATION: none } A:visited { FONT-SIZE: 9pt; COLOR: #3366cc; TEXT-DECORATION: none } A:active { FONT-SIZE: 9pt; TEXT-DECORATION: none } A:hover { COLOR: #0000ff; TEXT-DECORATION: none }</style> <a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <SCRIPT>var sRepeat=null;function doScrollerIE(dir, src, amount) { if (amount==null) {amount=10} if (dir=="up") {document.all[src].scrollTop-=amount} else {document.all[src].scrollTop+=amount} if (sRepeat==null) {sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100)} return false}window.document.onmouseout = new Function("clearInterval(sRepeat);sRepeat=null");window.document.ondragstart = new Function("return false");function msover(){{event.srcElement.style.color="000099";event.srcElement.style.backgroundColor="99ccff";event.srcElement.style.cursor = "hand";}}function msout(){{event.srcElement.style.color="";event.srcElement.style.backgroundColor="";event.srcElement.style.cursor = "auto";}}function markover(){{event.srcElement.style.color="990000";event.srcElement.style.cursor = "hand";}}function markout(){{event.srcElement.style.color="000000";event.srcElement.style.cursor = "auto";}}function toggle( targetId ){{target = document.all( targetId );if (target.style.display == "none"){target.style.display = "";} else {target.style.display = "none";}}}</SCRIPT> <table border=0> <TR><TD οnmοuseοver="this.style.backgroundColor = '990000';" οnmοuseοut="this.style.backgroundColor = '000099';" align=right BGCOLOR=#000099><A CLASS=scroll ONMOUSEOVER="return doScrollerIE('up','s1',10)" ONMOUSEOUT="clearInterval(sRepeat)" HREF="#" mce_HREF="#"><font color=white>向下滚动</A></TD></TR> <TR><TD BGCOLOR=99ccff><DIV ID=s1 CLASS=sc1 STYLE="width: 121; height: 125; overflow: hidden; background: #99ccff;" mce_STYLE="width: 121; height: 125; overflow: hidden; background: #99ccff;"> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=1">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=3">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=4">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=5">zzjs</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=6">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=7">欢迎您来到站长特效网，我们的网址是www.zzjs.net</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=8">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=9">欢迎您来到站长特效网，我们的网址是www.zzjs.net</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=10">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=11">欢迎您来到站长特效网，我们的网址是www.zzjs.net</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">大洲资讯付费广告系统</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">323站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">欢迎您来到站长特效网，我们的网址是www.zzjs.net</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">阿里西西，web开发之家</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> <A CLASS=scr HREF="<#ZC_BLOG_HOST#>?cat=2">站长特效网</A><BR> </DIV></TD></TR> <TR><TD align=right οnmοuseοver="this.style.backgroundColor = '990000';" οnmοuseοut="this.style.backgroundColor = '000099';" BGCOLOR=#000099><A CLASS=scroll ONMOUSEOVER="return doScrollerIE('down','s1',10)" ONMOUSEOUT="clearInterval(sRepeat)" HREF="#" mce_HREF="#"><font color=white>向上滚动</A></TD></TR> </table>