用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)文章
使用ajaxfileupload.js實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了使用ajaxfileupload.js實現(xiàn)上傳文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery autocomplate 自擴展插件、自動完成示例代碼
jquery-lib版本是 1.3.2的，該插件是簡單的擴展插件，代碼也比較簡單的封裝。所以看起來也比較簡單不是很費力，當然封裝得也不是很好。2011-03-03
其實這個也不算是 resizable 的BUG,但從官網(wǎng)下載下來的確實存在問題2010-10-10
基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
這篇文章主要介紹了基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jquery實現(xiàn)圖片隨機排列的方法,涉及jQuery操作圖片的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
jQuery創(chuàng)建插件的代碼分析，需要的朋友可以參考下。2011-04-04
本文整理了一些jquery入門必備的基本知識及相關(guān)實例，適合初學者學習，另附一些jquery的常用事件，感興趣的各位可不要錯過了哈2013-06-06
下面小編就為大家?guī)硪黄猨query if條件語句的寫法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery 操作日期、星期、元素的追加的實現(xiàn)代碼
主要實現(xiàn)日期的顯示，獲取年月日，時分秒、星期、判斷閏年，學習jquery的朋友可以參考下2012-02-02
jQuery插件multiScroll實現(xiàn)全屏鼠標滾動切換頁面特效
本文給大家分享的是一款jQuery整屏（全屏）滾動插件網(wǎng)頁特效，滾動鼠標滾輪整屏一屏滾動切換代碼，可設(shè)置文字/圖片絕對上下左右居中顯示JS代碼，時下最流行的jQuery全屏滾動插件?。嫒轀y試：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器）2015-04-04