<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置外面的大盒子*/
.box{
700px;
height: 398px;
/*设置居中*/
margin: 100px auto;
}
.text{
/*水平居中*/
text-align: center;
/*垂直居中 当行高等于自身的高度，则为垂直居中*/
line-height: 35px;
/*设置浮动 将内联元素设置块元素*/
float: left;
/*给内联元素设置宽度*/
175px;
/*去掉超链接底下的下划线*/
text-decoration: none;
background-color:#8584C3;
color: #F2F0FF;
/*背景复合*/
/*background: 颜色 图片 不重复 位置 ;*/
}
/*鼠标移入，背景颜色改变*/
a:hover{
background-color:#CEBBFF;
}
.pic{
/*overflow:hidden;*/
height: 363px;
background-image: url(img/1-02.JPG);
}
/* ~代表兄弟元素 */
.text:nth-child(2):hover ~ .pic{
background-image: url(img/1-03.JPG);
}
.text:nth-child(3):hover ~ .pic{
background-image: url(img/1-04.JPG);
}
.text:nth-child(4):hover ~ .pic{
background-image: url(img/1-01.JPG);
}
</style>
</head>
<body>
<div class="box">
<a href="" class="text">性能优化测试</a>
<a href="" class="text">超级帮会员</a>
<a href="" class="text">方士分支概念站</a>
<a href="" class="text">互通版上线</a>
<div class="pic"></div>
</div>
</body>
</html>