function bind(el, eventType, callback) { //标准事件绑定 if(typeof el.addEventListener === "function") { el.addEventListener(eventType, callback, false); } else if(typeof el.attachEvent === "function") { //ie事件绑定 el.attachEvent("on" + eventType, callback); } }
然后我们继续写鼠标悬停处理函数，代码如下：
//鼠标悬停处理函数 function mouseoverHandler(e) { var target = e.target || e.srcElement; var list = document.getElementsByTagName("li"); for(var i = 0; i < list.length; i++) { //清空所有li元素的big list[i].className = ""; } //根据事件的冒泡原理，找到需要变更class的li元素 while(target.tagName != "LI" && target.tagName != "BODY") { target = target.parentNode; } //给当前元素加上class big target.className = "big"; }
最后我们将所有函数写在window.onload里面，别忘了调用initList();。
最终实现效果如图：
可以点击链接查看，链接：
用Jquery方法来实现我们想要的效果：
从前面Jquery的例子我们可以看出，用Jquery方法要简单些，我们按照Javascript的分析思路，来完成Jquery代码，代码如下：
function mouseover(e) { //获取到li标签 var list = $('#subject li'); //获取到目标li标签，进行添加或删除操作 var target = $(e.target).parents('li'); list.removeClass('big'); target.addClass('big'); } (function() { var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })()
最终结果与Javascript方法的结果一样，可以点击链接查看，链接：
用CSS3做书签：
html部分代码：
<div> <pic> <ul> <li> <input type="radio" checked="checked" /> <div> <a href="#"> <p>点<br />绛<br />唇<br />·<br />花<br />信<br />来<br />时</p> </a> </div> <div> <h4>点绛唇·花信来时</h4> <p>花信来时，恨无人似花依旧。<br />又成春瘦，折断门前柳。<br />天与多情，不与长相守。<br />分飞后，泪痕和酒，占了双罗袖。</p> <p><span>译文:</span>应花期而来的风哟，你虽来了，但人已离散去，全不像那花儿依旧。 人到春来瘦，等候着心上人，倚门盼归，折断了门前杨柳。 上天赋予了人多情的心，却不肯给予长相守的机会。自你我分别后，伴随我的，只是相思的泪、浇愁的酒，沾湿了我的双罗袖。 </p> </div> </li> <li> <input type="radio" /> <div> <a href="#slide_two"> <p>鹧<br />鸪<br />天<br />·<br />守<br />得<br />莲<br />开<br />结<br />伴<br />游</p> </a> </div> <div> <h4>鹧鸪天·守得莲开结伴游</h4> <p>守得莲开结伴游，约开萍叶上兰舟。<br />来时浦口云随棹，采罢江边月满楼。<br /> 花不语，水空流，年年拚得为花愁。<br />明朝万一西风动，争向朱颜不耐秋。</p> <p><span>译文:</span>湖塘中长满了浮萍，姑娘们相约来到湖中，一起拨开浮萍采莲。来时，旭日初升，浦口水面上如烟的水汽，在长桨四周缭绕。采莲后回到岸上，月光已照满了高楼。 好花无语，流水无情，年年都为花落春去而伤愁。明天万一西风骤然强劲，无奈莲花抵抗不住秋寒，很快就会凋落。</p> </div> </li> <li> <input type="radio" /> <div> <a href="#slide_three"> <p>凉<br />州<br />词<br />二<br />首<br />·<br />其<br />一</p> </a> </div> <div> <h4>凉州词二首·其一</h4> <p>葡萄美酒夜光杯，<br />欲饮琵琶马上催。<br /> 醉卧沙场君莫笑，<br />古来征战几人回？</p> <p><span>译文:</span>酒筵上甘醇的葡萄美酒盛满在精美的夜光杯之中，歌伎们弹奏起急促欢快的琵琶声助兴催饮，想到即将跨马奔赴沙场杀敌报国，战士们个个豪情满怀。 今日一定要一醉方休，即使醉倒在战场上又何妨？此次出征为国效力，本来就打算马革裹尸，没有准备活着回来。 </p> </div> </li> <li> <input type="radio" /> <div> <a href="#slide_four"> <p>夜<br />雨<br />寄<br />北</p> </a> </div> <div> <h4>夜雨寄北</h4> <p>君问归期未有期，<br />巴山夜雨涨秋池。 <br />何当共剪西窗烛，<br />却话巴山夜雨时。</p> <p><span>译文:</span>您问归期，归期实难说准，巴山连夜暴雨，涨满秋池。何时归去，共剪西窗烛花，当面诉说，巴山夜雨况味。 </p> </div> </li> </ul> </pic> </div>
CSS部分代码：