<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
/* 转化为块级元素,增大选中范围 */
display: block;
height: 58px;
width: 120px;
text-decoration: none;
color: aliceblue;
}
.color1 a:hover {
color: aqua;
background-image: url(images/bg11.png);
}
.color2 a:hover {
color: aqua;
background-image: url(images/bg22.png);
}
.color3 a:hover {
color: aqua;
background-image: url(images/bg4.png);
}
.color4 a:hover {
color: aqua;
background-image: url(images/bg5.png);
}
.color1 {
/* 将行内元素转化为行内块 */
display: inline-block;
height: 58px;
width: 120px;
background-image: url(images/bg1.png);
line-height: 50px;
text-align: center;
}
.color2 {
/* 将行内元素转化为行内块 */
display: inline-block;
height: 58px;
width: 120px;
background-image: url(images/bg2.png);
line-height: 50px;
text-align: center;
}
.color3 {
/* 将行内元素转化为行内块 */
display: inline-block;
height: 58px;
width: 120px;
background-image: url(images/bg3.jpg);
line-height: 50px;
text-align: center;
}
.color4 {
/* 将行内元素转化为行内块 */
display: inline-block;
height: 58px;
width: 120px;
background-image: url(images/bg4.png);
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<span class="color1"><a href="www.baidu.com">百度一下</a></span>
<span class="color2"><a href="www.google.com">谷歌一下</a></span>
<span class="color3"><a href="www.souhu.com">搜狐官网</a></span>
<span class="color4"><a href="www.xiaomi.com">小米官网</a></span>
</body>
</html>