手风琴css

 

 html

   <div class="servicea1_list">

                            <ul class="servicea1_ul servicea1_on">

                                <li>

                                    <img class="img1" src="img/index/servicea1.jpg" alt="">

                                    <div class="servicea1_icon">

                                        <img class="service_icon1 service_icon2" src="img/index/servicea6.svg" alt="">

                                        <p>电案</p>

                                    </div>

                                </li>

                                <li class="servicea1_li">

                                    <p>

                                        管理优势。

                                    </p>

                                    <!-- platform-1.html -->

                                    <a class="gcloamore gclo0amore2">

                                        了解更多

                                        <i class="icon-zarrow-right innolight">

                                        </i>

                                    </a>

                                </li>

                            </ul>

                            <ul class="servicea1_ul">

                                <li>

                                    <img class="img1" src="img/index/servicea2.jpg" alt="">

                                    <div class="servicea1_icon">

                                        <img class="service_icon1 service_icon2" src="img/index/servicea7.svg" alt="">

                                        <p>决方案</p>

                                    </div>

                                </li>

                                <li class="servicea1_li">

                                    <p>

                                      大优势。

                                    </p>

                                    <a class="gcloamore gclo0amore2">

                                        了解更多

                                        <i class="icon-zarrow-right innolight"></i>

                                    </a>

                                </li>

                            </ul>

                            <ul class="servicea1_ul">

                                <li>

                                    <img class="img1" src="img/index/servicea3.jpg" alt="">

                                    <div class="servicea1_icon">

                                        <img class="service_icon1 service_icon2" src="img/index/servicea8.svg" alt="">

                                        <p>决方案</p>

                                    </div>

                                </li>

                                <li class="servicea1_li">

                                    <p>

                                        势。

                                    </p>

                                    <a class="gcloamore gclo0amore2">

                                        了解更多

                                        <i class="icon-zarrow-right innolight"></i>

                                    </a>

                                </li>

                            </ul>

                            <ul class="servicea1_ul">

                                <li>

                                    <img class="img1" src="img/index/servicea4.jpg" alt="">

                                    <div class="servicea1_icon">

                                        <img class="service_icon1 service_icon2" src="img/index/servicea9.svg" alt="">

                                        <p>鑫</p>

                                    </div>

                                </li>

                                <li class="servicea1_li">

                                    <p>

                                        方案。

                                    </p>

                                    <a class="gcloamore gclo0amore2">

                                        了解更多

                                        <i class="icon-zarrow-right innolight"></i>

                                    </a>

                                </li>

                            </ul>

                        </div>

 

css

.servicea1_list {

    display: flex;

    justify-content: space-between;

    /* flex-wrap: wrap; */

    margin-top: 60px;

}

.servicea1_ul {

    position: relative;

    display: flex;

    justify-content: space-between;

    transition: all 0.5s ease;

    overflow: hidden;

    /* width: 22%; */

    width: 268px;

    margin-right: 12px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.servicea1_ul .img1 {

    /* width: 268px; */

    width: 100%;

    height: 413px;

}

.servicea1_li {

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    background: #fff;

    padding: 50px 35px;

    width: 50%;

    height: 100%;

    visibility: hidden;

    opacity: 0;

    transition: all 0.3s ease;

    position: absolute;

    top: 0;

    left: 50%;

}

.servicea1_li a {

    margin-top: 50px;

}

.servicea1_li p {

    width: 198px;

}

.servicea1_on .servicea1_li {

    visibility: visible;

    opacity: 1;

    transition: all 0.3s ease;

}

.servicea1_on {

    /* width: 30%; */

    width: 536px;

}

.servicea1_icon {

    position: absolute;

    top: 15%;

    left: 15%;

}

.servicea1_icon p {

    color: #fff;

    margin-top: 10px;

}

.service_icon1 {

    height: 46px;

}

.service_icon2 {

    height: 40px;

}

.service_icon3 {

    height: 45px;

}

js

$('.servicea1_ul').mousemove(function () {

    $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on');

})

$('.servicea1_ul').click(function () {

    $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on');

})