モグラの配置と上下運動（CSS）

背景のCSS（共通）
.nest {
width: 120px;
height: 120px;
margin : 30px 30px 0px 30px;
background-color: khaki;
border-style: solid;
border-color: brown;
border-width: 0px 0px 20px 0px;
overflow : hidden;
position:relative; /* 子要素の位置を変更可能に */
}

.mole_e {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 0px 0px;
background : Chocolate;
border : 0;
outline : none;
margin : 0px 27px 0px 27px;
}

.mole_f {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 5px 0px;
background : chocolate;
border : 0;
outline : none;
margin : 0px 27px 0px 27px;
position : absolute; /* 親要素に対する位置指定 */
top : 60px; /* 上から60pxへ */
}

.mole_g {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 5px 0px;
background : chocolate;
border : 0;
outline : none;
margin : 0px 27px 0px 27px;
position : absolute;
top : 20px; /* 上から20pxへ */
}

★★モグラにマウスオーバー★★
.mole_h {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 5px 0px;
background : chocolate;
border : 0;
outline : none;
margin : 0px 27px 0px 27px;
position : absolute;
top : 90px;
}
.mole_h:hover /* マウスオーバー */{
top : 20px;
}

★★モグラにマウスオーバー★★
.mole_i {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 5px 0px;
background : chocolate;
border : 0;
outline : none;
margin : 0px 27px 0px 27px;
position : absolute;
top : 90px;
transition : top 1000ms; /* top要素を1000ミリ秒かけて変化 */
}
.mole_i:hover {
top : 20px;
}