在很多網(wǎng)站都有這樣的效果,那就是當(dāng)鼠標(biāo)放在新聞列表一行上的時(shí)候,整行就會(huì)變色,雖然使用CSS也能夠?qū)崿F(xiàn)此種功能,但是由于眾多瀏覽器版本對(duì)于CSS3并沒有良好的支持,所以在當(dāng)前情況下,使用jQuery實(shí)現(xiàn)此種功能是一個(gè)不錯(cuò)的選擇。
廢話不多說了,直接給大家貼jquery代碼了,具體代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.gimoo.net/" /> <title>綠夏網(wǎng)</title> <style type="text/css"> ul,li{ list-style:none; font-size:12px; } li{ width:250px; height:25px; line-height:25px; } .hover{ background-color:#666; } </style> <script type="text/javascript" src="http://www.gimoo.net/t/1904/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.hoverPlugin={ hover:function(selector){ $(selector).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); } }; $.hoverPlugin.hover(".mytest li"); }); </script> </head> <body> <ul class="mytest"> <li>1.俄羅斯爆發(fā)隕石雨,導(dǎo)致上千人受傷</li> <li>2.朝鮮成功進(jìn)行核試驗(yàn),半島無核進(jìn)程終結(jié)</li> <li>3.中國(guó)進(jìn)入春運(yùn)高峰期</li> </ul> </body> </html>
以上代碼實(shí)現(xiàn)了所需功能,盡管不夠美觀,可以根據(jù)實(shí)際需求自行修改。實(shí)現(xiàn)的方法也非常的簡(jiǎn)單,就是利用hover()方法為hover事件綁定兩個(gè)事件處理函數(shù),以添加或者刪除設(shè)置li元素背景顏色的CSS代碼。
以上代碼也很簡(jiǎn)單,大家有哪里不清楚的地方歡迎給我留言,我會(huì)及時(shí)給大家答復(fù)的,同時(shí)感謝大家一直以來對(duì)綠夏網(wǎng)網(wǎng)站的支持。