hover实现
<DOCTYPE html>
<html>
<head>
<title>Tab选项卡</title>
<meta charset="utf-8">
<style type="text/css">
body{
font-size: 0;
}
.box{
text-align: center;
}
.box .tab{
display: inline-block;
width: 120px;
height: 44px;
padding: 7px;
border: 1px solid #ccc;
border-bottom: 0px;
box-sizing:border-box;
background: #fff;
font-size: 16px;
line-height: 26px;
color: #555;
transition: all 0.5s linear;
}
.box .tab:hover{
background: #eee;
transition: all 0.5s linear;
}
.con{
width: 800px;
height: 400px;
margin:0 auto;
}
.con .list{
width: 800px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
position: absolute;
z-index: 1;
box-sizing:border-box;
}
.list img{
height: 300px;
width: auto;
margin: 40px auto;
}
.box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
.box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
.box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
.box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
.list:hover{
z-index: 3;
}
</style>
</head>
<body>
<div class="box">
<a class="tab">哇咔咔</a>
<a class="tab">太棒了</a>
<a class="tab">纳尼</a>
<a class="tab">不要听</a>
<div class="con">
<div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></div>
<div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></div>
<div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></div>
<div class="list"><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></div>
</div>
</div>
</body>
</html>
点击实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3外观漂亮淡入淡出Tab菜单演示</title>
<style>
@charset "utf-8";
body {
font-family: Cambria, Arial;
background: #333;
}
.tabs {
width: 100%;
max-width: 600px;
border: 1px solid black;
margin: 50px auto;
}
label {
cursor: pointer;
background: yellow;
color: red;
border-radius: 5px 5px 0 0;
padding: 1.5% 3%;
float: left;
margin-right: 2px;
font: italic 1em cambria;
}
label:hover {
background: blue;
}
input:checked+label {
background: palegreen;
color: blueviolet;
}
.tabs input:nth-of-type(1):checked~.panels .panel:first-child,
.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked~.panels .panel:last-child {
opacity: 1;
}
.panels {
float: left;
clear: both;
position: relative;
width: 100%;
background: #fff;
border-radius: 0 10px 10px 10px;
min-height: 315px;
}
.panel {
width: 100%;
opacity: 0;
position: absolute;
background: #fff;
border-radius: 0 10px 10px 10px;
padding: 4%;
box-sizing: border-box;
}
.panel h2 {
margin: 0;
font-family: Arial;
}
</style>
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab 444</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor
elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc,
eleifend ac fringilla at, malesuada in eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
<div class="panel">
<h2>This is Panel Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet
lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor
vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper
pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
</div>
</article>
</body>
</html>
有想换工作的同学可以找我内推哦不低于15k（前端，java，测试）
