width, hover

マウスが通ると長方形が縮みます。

実行結果

下のオレンジ色の部分をマウスが通過すると変形します。

hoverは通過(移動)なので四角の消えた領域で止まっていると条件によっては,伸縮を繰り返します。 マウスが通ると長方形が縮みます。
widthを変更することで形を変えることができます。

プログラム

HTML

<input type="checkbox" id="in">
<div class="box">div class="box"</div><!--形の元です。boxという名前を付けます。-->

---

/*CSS*/
.box{
width: 250px;/*横幅を与えます。*/
height: 200px;/*高さを決めます。*/
background-color: #f88;/*オレンジ色にしました。*/
}

.box:hover{/*マウスがboxの上を通過する時*/
width: 100px;/*横幅を100にします。*/
}
#in:checked .bix{
width: 100px;}

「ホバー」はスマホでは再現できません。左上のチェックボックスをクリックしてください。