<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a {
display: inline-block;
background-color: pink;
text-decoration: none;
text-align: center;
line-height: 100px;
}
.nav .tong {
background: no-repeat;
}
.nav .bg1 {
width: 219px;
height: 112px;
background: url(bg1.png) no-repeat;
}
.nav .bg2 {
width: 224px;
height: 117px;
background: url(bg2.png);
}
.nav .bg3 {
width: 217px;
height: 110px;
background: url(bg3.png);
}
.nav .bg4 {
width: 214px;
height: 108px;
background: url(bg4.png);
}
.nav .tong:hover {
background: url(bg5.png) no-repeat;
width: 173px;
height: 86px;
}
</style>
<body>
<div class="nav">
<a href="#" class="bg1 tong"></a>
<a href="#" class="bg2 tong"></a>
<a href="#" class="bg3 tong"></a>
<a href="#" class="bg4 tong"></a>
</div>
</body>
</html>