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 live example：

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/

干杯

用jQuery模仿css行为

2 个答案: