亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于jQuey實現(xiàn)鼠標滑過變色(整行變色)

 更新時間：2015年12月07日 14:36:10   作者：我是代碼努力  
相信大家在一些網(wǎng)站都看到過這種效果吧，當鼠標放在新聞列表一行的時候，整行就會變色，雖然使用CSS也能夠?qū)崿F(xiàn)此種功能，但是由于眾多瀏覽器版本對于CSS3并沒有良好的支持，所以在當前情況下，使用jQuery實現(xiàn)此種功能是一個不錯的選擇

在很多網(wǎng)站都有這樣的效果，那就是當鼠標放在新聞列表一行上的時候，整行就會變色，雖然使用CSS也能夠?qū)崿F(xiàn)此種功能，但是由于眾多瀏覽器版本對于CSS3并沒有良好的支持，所以在當前情況下，使用jQuery實現(xiàn)此種功能是一個不錯的選擇。

廢話不多說了，直接給大家貼jquery代碼了，具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<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.俄羅斯爆發(fā)隕石雨，導致上千人受傷</li>
 <li>2.朝鮮成功進行核試驗，半島無核進程終結(jié)</li>
 <li>3.中國進入春運高峰期</li>
</ul>
</body>
</html>

以上代碼實現(xiàn)了所需功能，盡管不夠美觀，可以根據(jù)實際需求自行修改。實現(xiàn)的方法也非常的簡單，就是利用hover()方法為hover事件綁定兩個事件處理函數(shù)，以添加或者刪除設(shè)置li元素背景顏色的CSS代碼。

以上代碼也很簡單，大家有哪里不清楚的地方歡迎給我留言，我會及時給大家答復的，同時感謝大家一直以來對腳本之家網(wǎng)站的支持。

相關(guān)文章

最新評論