练习鼠标悬停切换图片页面
Posted weixin2623670713
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练习鼠标悬停切换图片页面相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于练习鼠标悬停切换图片页面的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]
JavaScript练习--[使用js语言实现网页切换图片的效果]