基于jQuey實現(xiàn)鼠標(biāo)滑過變色(整行變色)
更新時間：2015年12月07日 14:36:10 作者：我是代碼努力
相信大家在一些網(wǎng)站都看到過這種效果吧，當(dāng)鼠標(biāo)放在新聞列表一行的時候，整行就會變色，雖然使用CSS也能夠?qū)崿F(xiàn)此種功能，但是由于眾多瀏覽器版本對于CSS3并沒有良好的支持，所以在當(dāng)前情況下，使用jQuery實現(xiàn)此種功能是一個不錯的選擇
在很多網(wǎng)站都有這樣的效果，那就是當(dāng)鼠標(biāo)放在新聞列表一行上的時候，整行就會變色，雖然使用CSS也能夠?qū)崿F(xiàn)此種功能，但是由于眾多瀏覽器版本對于CSS3并沒有良好的支持，所以在當(dāng)前情況下，使用jQuery實現(xiàn)此種功能是一個不錯的選擇。
廢話不多說了，直接給大家貼jquery代碼了，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.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.俄羅斯爆發(fā)隕石雨，導(dǎo)致上千人受傷</li>
<li>2.朝鮮成功進行核試驗，半島無核進程終結(jié)</li>
<li>3.中國進入春運高峰期</li>
</ul>
</body>
</html>
以上代碼實現(xiàn)了所需功能，盡管不夠美觀，可以根據(jù)實際需求自行修改。實現(xiàn)的方法也非常的簡單，就是利用hover()方法為hover事件綁定兩個事件處理函數(shù)，以添加或者刪除設(shè)置li元素背景顏色的CSS代碼。
以上代碼也很簡單，大家有哪里不清楚的地方歡迎給我留言，我會及時給大家答復(fù)的，同時感謝大家一直以來對腳本之家網(wǎng)站的支持。
相關(guān)文章
jquery動態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動態(tài)加載js代碼，但不能加載css，后來自己寫了一個可加載js與css的程序2014-10-10
這幾天在學(xué)習(xí)jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。最后，終于搜索到一篇講解比較清晰的文章，這里自己總結(jié)了一下，并以一個具體的示例來說明jQuery插件的寫法2013-06-06
這篇文章主要介紹了jQuery實現(xiàn)的Div窗口震動效果,可實現(xiàn)點擊提交后窗口出現(xiàn)震動效果,需要的朋友可以參考下2015-08-08
jquery插件豐富，很多都是很好用的，最近學(xué)習(xí)了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實很簡單，這里介紹一下。2010-06-06
jquery數(shù)組之存放checkbox全選值示例代碼
使用jquery數(shù)組可以存放checkbox全選值，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)前端知識有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-04-04
別踩白塊是一款簡單易上手的數(shù)字小游戲,下面這篇文章主要給大家介紹了關(guān)于使用jquery實現(xiàn)別踩白塊小游戲的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
精心挑選的12款優(yōu)秀的基于jQuery的手風(fēng)琴效果插件和教程
當(dāng)你想在有限的頁面空間內(nèi)展示多個內(nèi)容片段的時候，手風(fēng)琴（Accordion）效果就顯得非常有用，它可以幫助你以對用戶非常友好的方式實現(xiàn)多個內(nèi)容片段之間的切換。借助流行的 jQuery 框架，只需很少的代碼就可以實現(xiàn)精美的手風(fēng)琴效果，幫助你的網(wǎng)站吸引更多用戶的眼球2012-08-08
這篇文章主要介紹了jQuery+ajax實現(xiàn)文章點贊功能的方法,涉及jQuery基于ajax無刷新post提交實現(xiàn)點贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下2015-12-12
JQuery設(shè)置和去除disabled屬性的5種方法總結(jié)
下面與大家分享下兩種方法設(shè)置disabled屬性以及三種方法移除disabled屬性，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05