当前位置: 编程技术>WEB前端
用jQuery toggleClass 实现鼠标移上变色
来源: 互联网 发布时间:2014-08-25
本文导语: 按钮移上变色效果 代码如下: .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; ...
按钮移上变色效果
.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;
}
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
代码如下:
.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;
}
按钮
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})