<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*去除默認樣式*/
*{
margin: 0;
padding: 0;
}
/*設置外面的大盒子*/
.box{
width: 700px;
height: 398px;
/*設置居中*/
margin: 100px auto;
}
.text{
/*水平居中*/
text-align: center;
/*垂直居中 當行高等於自身的高度，則為垂直居中*/
line-height: 35px;
/*設置浮動 將內聯元素設置塊元素*/
float: left;
/*給內聯元素設置寬度*/
width: 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>
練習鼠標懸停切換圖片頁面
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。