基於jQuey實作滑鼠滑過變色(整行變色)_jquery
- WBOY原創
- 2016-05-16 15:27:221164瀏覽
在許多網站都有這樣的效果，那就是當滑鼠放在新聞列表一行上的時候，整行就會變色，雖然使用CSS也能夠實現此種功能，但是由於眾多瀏覽器版本對於CSS3並沒有良好的支持，所以在當前情況下，使用jQuery實現此種功能是一個不錯的選擇。
廢話不多說了，直接給大家貼jquery程式碼了，具體程式碼如下圖：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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程式碼。
以上程式碼也很簡單，大家有哪裡不清楚的地方歡迎給我留言，我會及時給大家答复的，同時感謝大家一直以來對腳本之家網站的支持。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn