求教大家，js点击小磁贴效果问题，有图显示！

图片说明
想写一个仿携程app的小磁帖手按下去的效果，希望能给解答详细点，谢谢！

div {transition: all 0.2s ease-in-out;}
div.hover {transform: scale(0.8);}

$("div").click(function () {
$(this).addClass("hover").siblings().removeClass("hover");
});

额，移开没写

 $("div").mouseleave(function () {
     $(this).removeClass("hover");
    })

使用CSS伪类， ：hover 悬浮时，进行缩放，缩放到0.8，添加移动，让他缓慢缩放

hover过渡padding，padding向内缩小

<!DOCTYPE html>

< head>

< style>
.testBtn{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: blue;
color: white;
margin: 1.5px;
cursor: pointer;
}
.testBtn:HOVER{
transform: scale(0.9);
-ms-transform:scale(0.9);

-moz-transform:scale(0.9);

-webkit-transform:scale(0.9);
-o-transform:scale(0.9);
}


< body>
< div class="testBtn">
火车票

< div class="testBtn">
机票

< div style="clear:both;">

< div class="testBtn">
租车

< div class="testBtn">
专车


<!DOCTYPE html>

< head>

< style>
.testBtn{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: blue;
color: white;
margin: 1.5px;
cursor: pointer;
}
.testBtn:HOVER{
transform: scale(0.9);
-ms-transform:scale(0.9);

-moz-transform:scale(0.9);

-webkit-transform:scale(0.9);
-o-transform:scale(0.9);
}
< /style>
< /head>
< body>
< div class="testBtn">
火车票
< /div>
< div class="testBtn">
机票
< /div>
< div style="clear:both;">
< /div>
< div class="testBtn">
租车
< /div>
< div class="testBtn">
专车
< /div>
< /body>
< /html>