用jQuery模仿css行爲

Question

我想製作一個按鈕，其行爲與jQuery的行爲與css完全相同。

HTML：

<br> 
<button class="pure-css">Test</button> 
<br> 
<br> 
<br> 
this is jQuery : 
<br> 
<button class="pure-jQuery">Test</button> 

CSS：

.pure-css {background-color:#aaa;} 
.pure-css:hover{background-color:#ccc;} 
.pure-css:active{background-color:#fff;} 

的jQuery：

/* here I want the defalt position via jQuery */ 
{ 
$(".pure-jQuery").css("background-color","#aaa"); 
} 

/* here I want the hover style via jQuery */ 
{ 
$(".pure-jQuery").css("background-color","#ccc"); 
} 

/* here I want the active style via jQuery */ 
{ 
$(".pure-jQuery").css("background-color","#fff"); 
} 

/* if needed (on mouse out) so one more back to default */ 

{ 
/*back to default if needed*/ 
} 

的jsfiddle活生生的例子：

http://jsfiddle.net/CtKs8/12/

Answer 1

$(document).ready(function(){ 
     $('.pure-jQuery').css('background-color','#aaa'); 
    $('.pure-jQuery').mouseover(function(){ 
    $(this).css('background-color','#ccc'); 
    }); 
    $('.pure-jQuery').mouseleave(function(){ 
    $(this).css('background-color','#aaa'); 
    }); 

$('.pure-jQuery').mousedown(function(){ 
    $(this).css('background-color','#fff'); 
    }); 
    $('.pure-jQuery').mouseup(function(){ 
    $(this).css('background-color','#aaa'); 
    }); 

}); 

精確的100％的工作測試

Answer 2

這會做的伎倆：

$(".pure-jQuery").hover(function(){ 
    $(this).css("background-color","#ccc") 
},function(){ 
    $(this).css("background-color","#fff") 
}); 

在這裏工作：http://jsfiddle.net/edgarinvillegas/CtKs8/13/

乾杯