tab 选择悬停展示

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>