用jQuery toggleClass 實現(xiàn)鼠標移上變色
更新時間：2014年05月14日 11:18:16 作者：
這篇文章主要介紹了用jQuery toggleClass 實現(xiàn)鼠標移上變色,需要的朋友可以參考下
按鈕移上變色效果
<style>
.round-corner-btn {
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width:200px; height:40px; line-height: 40px;
background: green;
display:inline-block;
color:white;
text-align : center;
cursor: pointer;
}
.avatar_size{
font-size:12px;
text-align: center;
margin-top:4px;
}
.btn-hover{
opacity: 0.8;
}
</style>
<div class='round-corner-btn'> 按鈕</div>
<script>
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
</script>
復(fù)制代碼 代碼如下:
<style>
.round-corner-btn {
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width:200px; height:40px; line-height: 40px;
background: green;
display:inline-block;
color:white;
text-align : center;
cursor: pointer;
}
.avatar_size{
font-size:12px;
text-align: center;
margin-top:4px;
}
.btn-hover{
opacity: 0.8;
}
</style>
<div class='round-corner-btn'> 按鈕</div>
<script>
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
</script>
您可能感興趣的文章:
- 使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
- jQuery使用addClass()方法給元素添加多個class樣式
- jQuery中addClass()方法用法實例
- Jquery.addClass始終無效原因分析
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery中removeClass()方法用法實例
- jQuery使用removeClass方法刪除元素指定Class的方法
- jQuery源碼解讀之removeClass()方法分析
- jQuery中toggleClass()方法用法實例
- jQuery使用toggleClass方法動態(tài)添加刪除Class樣式的方法
- JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
相關(guān)文章
基于jQuery插件實現(xiàn)環(huán)形圖標菜單旋轉(zhuǎn)切換特效
本文給大家分享一款基于jQuery環(huán)形圖標旋轉(zhuǎn)切換特效。這是一款鼠標點擊圖標菜單圓形順時針或者逆時針旋轉(zhuǎn)切換代碼。有需要的小伙伴可以參考下。2015-05-05
對于想學(xué)習(xí)制作jquery 插件的朋友需要用的到。2008-12-12
jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果,實例分析了jquery操作頁面樣式動態(tài)變換及熱區(qū)的選擇技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery Validation Plugin驗證插件手動驗證
jquery.validate是jquery旗下的一個驗證框架，借助jquery的優(yōu)勢，我們可以迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，并且對國際化也有很好的支持，接下來通過本文給大家介紹jQuery Validation Plugin驗證插件手動驗證2016-01-01
本篇文章主要介紹了jQuery操作css樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
下面小編就為大家?guī)硪黄猨Query制作全屏寬度固定高度輪播圖(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jquery實現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對jquery實現(xiàn)省市select下拉框的替換(示例代碼)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery1.3.2 升級到j(luò)Query1.4.4需要修改的地方
jQuery1.3.2 升級到 1.4.4 ，需要修改的地方，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了jQuery實現(xiàn)默認是閉合的FAQ展開效果菜單,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表單驗證，所有驗證通過方可提交，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11