一.需要的效果
1）.未移入前
2）.鼠标移入后
3）.鼠标移出
二.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
a {
position: relative;
}
a img{
display: none;
position:absolute;
left: 50%;
margin-left: -60px;
margin-top: -2px;
}
a:hover img{
display: block;
}
</style>
<body>
<a href="" class="text-muted">
<span>宠物之家</span><br />
<img src="img/pet_04.jpg" alt="宠物之家" width="130px"/>
</a>
</body>
</html>