css

.point_amount_label{
width: 120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
border: 1px solid #e8e8e8;
background-color: #f7f7f7;
color: #999;
cursor: pointer;
line-height: 40px;
}

.click{
border: 2px solid #1ba9d9;;
color: #1ba9d9;
width: 120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
line-height: 40px;
}

.arrow-down {
width:2px;
height:2px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #1ba9d9;
transform: rotate(315deg);
position: absolute;
margin-top: -11px;
margin-left: 104px;

}

html:

<label id="credit_amount_20" class=" click have" amount="20">￥20.00<div class="arrow-down"></div></label>
<label id="credit_amount_50" class="point_amount_label have" amount="50">￥50.00</label>
<label id="credit_amount_100" class="point_amount_label have" amount="100">￥100.00</label>
<label id="credit_amount_0" class="point_amount_label none" >其他金額</label>

js:

$("label").on({
mouseover:function(){
$(this).addClass(‘click‘);
$(this).removeClass(‘point_amount_label‘);
$(this).append(‘<div class="arrow-down"></div>‘);
$(this).siblings(‘label‘).removeClass(‘click‘);
$(this).siblings(‘label‘).addClass(‘point_amount_label‘);
$(this).siblings(‘label‘).children().remove();
},
mouseout:function(){
if(!isclick){
$(this).addClass(‘point_amount_label‘);
$(this).removeClass(‘click‘);
$(this).children().remove();
}
},
click:function(){
$(".amount_input ").val(‘‘).focus();
$(‘.red-text‘).text($(this).attr(‘amount‘));
$(this).siblings(‘label‘).removeClass(‘click‘);
$(this).siblings(‘label‘).addClass(‘point_amount_label‘);
$(this).siblings(‘label‘).children().remove();
$(this).addClass(‘click‘);
$(this).removeClass(‘point_amount_label‘);
$(this).append(‘<div class="arrow-down"></div>‘);
isclick=true;
}
});

光標事件:

$(‘.amount_input‘).blur(function(){
var val=$(‘.amount_input‘).val();
$(‘.red-text‘).text(val);

});

點擊之後去取消當前的樣式,給選中對象添加樣式