マウスなし：
3番目のボックスの後にマウス：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
<スタイルタイプ= "テキスト/ cssの">
#maxbox {
幅：830px;
高さ：350px;
表示：フレックス。
正当化 -content：省スペースの間;
}
#maxbox > DIV {
幅：205px;
高さ： 100％;
オーバーフロー：隠されました;
背景 -size：830px、100％;
位置：相対;
色：白;
カーソル：ポインタ;
}
＃box01 {
背景 -image：URL（IMG /ホームページ-全車両-BG-img.jpg）。
}
＃box02 {
背景 -image：URL（IMG /ホームページ-全車両-BG-img.jpg）。
背景位置： - 210px;
}
＃box03 {
背景 -image：URL（IMG /ホームページ-全車両-BG-img.jpg）。
背景位置： - 420px;
}
＃box04 {
背景-image：URL（IMG /ホームページ-すべて-車-BG-img.jpg）;
背景位置： - 620px;
}
.black {
幅： 100％ 。
高さ： 100％;
}
.minbox > P {
フォント熱重量：900 。
}
.black：ホバー{
背景 -color：RGBA（0,0,0、0.25 ）。
}
.black：ホバー > DIV {
変換：移動Y（ - 20ピクセル）を、
}
.black：ホバースパン{
色：ブラック。
背景 - 色：白;
}
.minbox {
位置：絶対。
下： 0 ;
幅： 100％;
高さ：150ピクセル;
/ * 背景色：水色。* /
テキスト - 整列：センター;
}
.jiantou {
マージン： 0 自動。
表示ブロック;
幅：30px;
高さ：30px;
境界 -radius：50％;
国境：1pxの白い固体;
フォント - サイズ：16pxに;
行 - 高さ：30px;
}
</スタイル>
</ head>
<body>
<DIV ID = "maxbox">
<DIV ID = "box01">
<DIV CLASS = "黒">
<DIV CLASS = "minbox">
<スパンクラス= "jiantou 「>> </ span>の
<P>轿车</ P>
</ div>
</ div>
<DIV CLASS = "黒">
<スパンクラス= "jiantou" >> </ span>の
<スパンクラス= "jiantou" >> </スパン>
<P> SUV </ P>
</ div>
</ div>
</ div>
<DIV ID = "box03">
<DIV CLASS = "黒">
< DIV CLASS = "minbox">
<スパンクラス= "jiantou" >> </ span>の
<P>跑车</ P>
</ div>
</ div>
</ div>
<divのID = "box04">
<div要素クラス=「黒」>
<DIV CLASS = "minbox">
</ div>
<P> MPV </ P>
</ div>
</ div>
</ div>
</ BODY>
</ HTML>