码迷,mamicode.com
首页 > 其他好文 > 详细

练习鼠标悬停切换图片页面

时间:2020-06-10 13:10:03      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:复合   auto   title   height   image   overflow   改变   去掉   hover   

<!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>

练习鼠标悬停切换图片页面

标签:复合   auto   title   height   image   overflow   改变   去掉   hover   

原文地址:https://www.cnblogs.com/weixin2623670713/p/13084309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!