网站首页 > 网页设计教程 > 网页特效 > 鼠标放到文字链接上，文字的底色和本身色彩都会改变

鼠标放到文字链接上，文字的底色和本身色彩都会改变

作者：互联网
时间：2009-06-18 17:24:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<span class="visiblesaf0">http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</span>"> <html xmlns="<span class="visiblesaf1">http://ww***.org/1999/xhtml</span>" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>Bubble in JavaScript DOM</title> <style type="text/css" media="screen"> div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; height:2em;} </style> <script type="text/javascript"> //<![CDATA[ function init(){ var log = <span class="visiblesaf2">do***ent.getElementsByTagName</span>('textarea')[0]; var all = <span class="visiblesaf2">do***ent.getElementsByTagName</span>('div')[0].getElementsByTagName('*'); for (var i = 0, n = <span class="visiblesaf4">al***ength</span>; i < n; ++i){ all[i].onmouseover = function(e){ <span class="visiblesaf5">th***style.border</span> = '1px solid red'; <span class="visiblesaf6">lo***alue</span> = '鼠标现在进入的是： ' + <span class="visiblesaf7">th***nodeName</span>; }; all[i].onmouseout = function(e){ <span class="visiblesaf5">th***style.border</span> = '1px solid white'; }; } var all2 = <span class="visiblesaf2">do***ent.getElementsByTagName</span>('div')[1].getElementsByTagName('*'); for (var i = 0, n = <span class="visiblesaf10">al***length</span>; i < n; ++i){ all2[i].onmouseover = function(e){ <span class="visiblesaf5">th***style.border</span> = '1px solid red'; if (e) //停止事件冒泡 <span class="visiblesaf12">e.***pPropagation</span>(); else <span class="visiblesaf13">wi***w.event.cancelBubble</span> = true; <span class="visiblesaf6">lo***alue</span> = '鼠标现在进入的是： ' + <span class="visiblesaf7">th***nodeName</span>; }; all2[i].onmouseout = function(e){ <span class="visiblesaf5">th***style.border</span> = '1px solid white'; }; } } <span class="visiblesaf17">wi***w.onload</span> = init; //]]> </script> </head> <body> <h1>Bubble in JavaScript DOM</h1> <p>DOM树的结构是：</p> <pre><code> UL - LI - A - SPAN </code></pre> <div> <ul> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> </ul> </div> <textarea>

鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（mouseover）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。

如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。

上一篇：直接在页面上的刷新按钮[网页特效]

下一篇：用按钮实现加入收藏夹及主页

鼠标放到文字链接上，文字的底色和本身色彩都会改变

相关阅读

最新文章

人气下载推荐

相关应用

热门文章

推荐游戏