tab 选择悬停展示

Posted 2020-09-24 秦雨

html:

<div class="pz_cake_one">
    <div class="pz-cake-main">
        <ul class="ul1" id="kjx">
            <li class="left1"><h2>文字</h2><div class="em"></div></li>
            <li class="left2"><h2>文字</h2><div class="em"></div></li>
            <li class="left3"><h2>文字</h2><div class="em"></div></li>
            <li class="right1"><h2>文字</h2><div class="em"></div></li>
            <li class="right2"><h2>文字</h2><div class="em"></div></li>
            <li class="right3"><h2>文字</h2><div class="em"></div></li>
            <li class="right4"><h2>文字</h2><div class="em"></div></li>
        </ul>
        <ul class="ul2" id="kjd">
            <li style="z-index: 10"><img src="/cij/img/pzkjd1.jpg"/></li>
            <li style="z-index: 9"><img src="/cij/img/pzkjd2.jpg"/></li>
            <li style="z-index: 8"><img src="/cij/img/pzkjd3.jpg"/></li>
            <li style="z-index: 7"><img src="/cij/img/pzkjd4.jpg"/></li>
            <li style="z-index: 6"><img src="/cij/img/pzkjd5.jpg"/></li>
            <li style="z-index: 5"><img src="/cij/img/pzkjd6.jpg"/></li>
            <li style="z-index: 4"><img src="/cij/img/pzkjd7.jpg"/></li>
        </ul>
        <div style="clear: both;"></div>
    </div>
</div>

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:

<script defer>
    /*空间配置*/
    function kjimgs() {
        var index = 0;
        /*照片小图区域*/
        var kjx = document.getElementById("kjx");
        var kjxli = kjx.getElementsByTagName("li");
        /*照片大图区域*/
        var kjd = document.getElementById("kjd");
        var kjdli = kjd.getElementsByTagName("li");
        for(var i = 0;i < kjxli.length;i++ ) {
            kjxli[i].index = i;
            kjxli[i].onmousemove = function () {
                index = this.index;
                tab();
            }
        }
        function tab() {
            for(var j = 0;j < kjxli.length; j++ ) {
                kjdli[j].index = j;
                kjdli[j].style.display = "none";
                if(index == kjdli[j].index) {
                    kjdli[j].style.display = "block";
                }
            }
        }
    }
    kjimgs();
</script>