tab 选择悬停展示

html:

    

        

            
文字

            
文字

            
文字

            
文字

            
文字

            
文字

            
文字

        
        

            

            

            

            

            

            

            

        
        

    

css:

.pz_cake_one {
    width: 100%;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 40px;
}
.pz-cake-main{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.pz_cake_one .ul1{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
}
.pz_cake_one .ul1 li{
    position: absolute;
    width: 220px;
}
.pz_cake_one .ul1 li:hover{
    background: #f3f3f3;
}
.pz_cake_one .ul1 li:hover .em{  display: block;  }
.pz_cake_one .ul1 li:hover h2{  display: block;  }
.pz_cake_one .ul1 h2{
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    width: 200px;
    height: 30px;
    position: absolute;
    left: 50%;margin-left: -100px;
    top: 50%;margin-top: -15px;
    line-height: 30px;
    color: #333;
    display: none;
}
.pz_cake_one .ul1 .left1 .em,
.pz_cake_one .ul1 .left2 .em,
.pz_cake_one .ul1 .left3 .em
{
    position: absolute;
    top: -1px;
    right: -29px;
    width: 29px;
    height: 154px;
    background: #f3f3f3;
    z-index: 20;
    display: none;
}
.pz_cake_one .ul1 .right1 .em,
.pz_cake_one .ul1 .right2 .em,
.pz_cake_one .ul1 .right3 .em,
.pz_cake_one .ul1 .right4 .em
{
    position: absolute;
    top: -1px;
    left: -22px;
    width: 22px;
    height: 116px;
    background: #f3f3f3;
    z-index: 20;
    display: none;
}
.pz_cake_one .ul1 .left1{top: 0;left: 0;height: 154px;background: url("/cij/img/pzkjx1.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .left2{top:50%;margin-top:-77px;left: 0;height: 154px;background: url("/cij/img/pzkjx2.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .left3{bottom:-2px;left: 0;height: 154px;background: url("/cij/img/pzkjx3.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .right1{top:0;right: 0;height: 116px;background: url("/cij/img/pzkjx4.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .right2{top:50%;margin-top:-124px;right: 0;height: 116px;background: url("/cij/img/pzkjx5.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .right3{top:50%;margin-top:7px;right: 0;height: 116px;background: url("/cij/img/pzkjx6.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul1 .right4{bottom:-2px;right: 0;height: 116px;background: url("/cij/img/pzkjx7.jpg")no-repeat center;background-size: 100% 100%;}
.pz_cake_one .ul2{
    float: left;
    position: relative;
    left: 50%;
    margin-left: -351px;
    width: 710px;
    height: 509px;
    clear: none;
    background: #f3f3f3;
}
.pz_cake_one .ul2 li{
    padding: 40px;
    position: absolute;
    top: 0;left: 0;
    width: 627px;height: 429px;
}
.pz_cake_one .ul2 li img{
    width: 100%;
    height: 100%;
}

js:

转载于:https://www.cnblogs.com/thongyan/p/7064174.html