在很多網站都有這樣的效果，那就是當鼠標放在新聞列表一行上的時候，整行就會變色，雖然使用CSS也能夠實現此種功能，但是由于眾多瀏覽器版本對于CSS3并沒有良好的支持，所以在當前情況下，使用jQuery實現此種功能是一個不錯的選擇。
廢話不多說了，直接給大家貼jquery代碼了，具體代碼如下所示：
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.49028c.com/" /><title>武林網</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="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.俄羅斯爆發隕石雨，導致上千人受傷</li> <li>2.朝鮮成功進行核試驗，半島無核進程終結</li> <li>3.中國進入春運高峰期</li></ul></body></html> 以上代碼實現了所需功能，盡管不夠美觀，可以根據實際需求自行修改。實現的方法也非常的簡單，就是利用hover()方法為hover事件綁定兩個事件處理函數，以添加或者刪除設置li元素背景顏色的CSS代碼。
以上代碼也很簡單，大家有哪里不清楚的地方歡迎給我留言，我會及時給大家答復的，同時感謝大家一直以來對武林網網站的支持。
新聞熱點
疑難解答
