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