css+js实现鼠标hover上去展示隐藏，并添加动画下拉效果；swiper一次显示3个，一次滑动两张；监听鼠标移入移出mouseout，mouseove事件中判断鼠标是否在元素内部移动移出

小米李

已于 2023-01-13 18:18:19 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： mouseover mouseout swiper css实现下拉添加动画

于 2022-10-11 15:18:01 首次发布

本文链接：https://blog.youkuaiyun.com/Sunny_lxm/article/details/127263999

.all-attributes {
                background-color: #fff;
                height: 310px;
                display: flex;
                overflow: hidden;
                transition: height 0.4s ease-out;
            }
            .all-attributes-none {
                height: 0;
                overflow: hidden;
                transition: height 0.4s ease-out;
            }

<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>
        .search-laser-by-attributes a {
            text-decoration: none; /* 去除默认的下划线 */
            color: #000;    /* 去除默认的颜色和点击后变化的颜色 */
        }
        /*pc*/
        /*@media only screen and (min-width: 900px) {*/
            .pc-home-search-laser {
                width: 1200px;
                height: 400px;
                margin: 80px auto;
                background: url("https://cdn.shopify.com/s/files/1/0593/6807/9512/files/banner1_300x.jpg?v=1661392507") no-repeat;
                background-size: 100% 100%;
                object-fit: cover;
                position: relative;
            }
            .search-info {
                width: 60%;
                position: absolute;
                top: 72%;
                left: 50%;
                transform: translate(-50%);
                border: 1px solid #c8c9ca;
                z-index: 2;
                background-color: #fff;
            }
            .search-title {
                background-color: #fff;
                height: 40px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #c8c9ca;
                cursor: pointer;
            }
            .has-select-attributes {
                height: 40px;
                flex: 1;
                padding-left: 20px;
            }
            .search-btn {
                background-color: #1e78ab;
                line-height: 40px;
                color: #fff;
                font-family: Avenir-Roman;
                padding: 0 20px;
                height: 101%;
                width: 90px;
                text-align: center;
            }
            
            .all-attributes {
                background-color: #fff;
                height: 310px;
                display: flex;
                overflow: hidden;
                transition: height 0.4s ease-out;
            }
            .all-attributes-none {
                height: 0;
                overflow: hidden;
                transition: height 0.4s ease-out;
            }
            .first-attributes {
                width: 220px;
                border-right: 1px solid #c8c9ca;
            }
            .first-attributes-item {
                width: 100%;
                height: 40px;
                padding-left: 20px;
                box-sizing: border-box;
                line-height: 40px;
                cursor: pointer;
            }
            .first-attributes-item:hover {
                color: #fff;
                background-color: #1e78ab;
            }
            .first-attributes-active {
                color: #fff;
                background-color: #1e78ab;
            }
            .second-attributes {
                flex: 1;
            }
            .second-attributes-classifiers {
                padding: 40px 60px;
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
            }
            .second-attributes-item {
                width: 50%;
                text-align: center;
                height: 40px;
                cursor: pointer;
                display: flex;
                justify-content: flex-end;
            }
            .attributes-value {
                width: 80%;
                text-align: left;
            }
            .checked-outer {
                display: inline-block;
                box-sizing: border-box;
                width: 16px;
                height: 16px;
                border-radius: 100%;
                margin-right: 10px;
                border: 1px solid #c8c9ca;
            }
            .checked-outer-active:after{
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #1e78ab;
                position: relative;
                top: 7px;
                left: 7px;
                transform: translate(-50%, -50%);
            }
            .second-attributes-none {
                display: none;
            }
            .search-condition {
                color: #c8c9ca;
                line-height: 40px;
                font-family: Avenir-Roman;
                font-size: 16px;
            }
            .search-info-value {
                color: #c8c9ca;
                line-height: 40px;
                font-family: Avenir-Roman;
                font-size: 16px;
                opacity: 0;
                position: fixed;
                top: 100%;
            }
            /*模块标题*/
            .section-title {
                font-family: DIN;
                font-size: 50px;
                text-align: center;
                color: #fff;
                padding-top: 10%;
            }
            /*product list*/
            .find-laser-wrapper {
                display: flex;
                width: 1200px;
                margin: auto;
            }
            .find-laser-wrapper-none {
                display: none;
            }
            .de-laser-list-wrapper {
                flex: 1;
                width: 1200px;
            }
            .de-laser-list {
                display: flex;
                overflow: hidden;
            }
            .de-laser-arrow-left, .de-laser-arrow-right {
                width: 60px;
                height: 60px;
                cursor: pointer;
            }
            .de-laser-product-item {
                flex-shrink: 0;
                text-align: center;
            }
            .de-laser-pro-name, .de-laser-pro-info {
                font-size: 30px;
                font-family: DIN;
            }
            .de-laser-pro-info {
                margin-bottom: 20px;
            }
            .selling-point-text {
                border-bottom: 1px solid #c8c9ca;
                font-family: Avenir-Roman;
                font-size: 16px;
                padding: 10px 0;
            }
            .de-laser-selling-point .selling-point-text:first-child {
                border-top: 1px solid #c8c9ca;
            }
            .authentication-img img{
                width: 30px;
                height: 30px;
                margin-top: 10px;
            }
            .swiper {
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                box-sizing: border-box;
                padding: 0 35px;
                text-align: center;
                font-size: 18px;
                background: #fff;
            }
            .swiper-slide:hover {
                background-color: #f6f6f7;
            }
            /*先去掉默认样式*/
            .swiper-button-prev:after{
                color: #fff;
                font-size: 20px;
                text-align: center;
            }
            .swiper-button-next:after{
                color: #fff;
                font-size: 20px;
                text-align: center;
            }
            /*再自定义样式*/
            .swiper-button-prev{
                width: 35px;
                height: 35px;
                background-color: #1e78ab;
                bottom: 15px;
                border-radius: 100%;
                overflow: hidden;
                left: 0;
            }
            .swiper-button-next{
                width: 35px;
                height: 35px;
                bottom: 15px;
                border-radius: 100%;
                overflow: hidden;
                background-color: #1e78ab;
                right: 0;
            }
        /*}*/
        /*   容器1200px的在900-1200之前的长度设置 */
        @media only screen and (max-width: 1200px) and (min-width: 900px) {
            .pc-home-search-laser {
                width: 95%;
            }
            .find-laser-wrapper {
                width: 95%;
            }
            .de-laser-list-wrapper {
                width: 95%;
            }
        }
        /*mobile*/
        @media only screen and (max-width:899px) {
            .pc-home-search-laser {
                width: 100%;
            }
            .section-title {
                font-size: 30px;
                padding-top: 18%
            }
            .search-info {
                width: 85%;
                top: 60%;
            }
            .second-attributes-item {
                width: 100%;
                height: auto;
                margin-bottom: 10px;
            }
            .second-attributes-classifiers {
                display: block;
                padding: 20px 0 ;
            }
            .second-attributes-none {
                display: none;
            }
            .find-laser-wrapper {
                width: 100%;
                overflow-x: scroll;
            }
            .swiper-slide {
                padding: 0;
                width: 42%;
            }
            .de-laser-product-item .product-img {
                width: 90%;
            }
            .de-laser-pro-name, .de-laser-pro-info {
                font-size: 20px;
            }
        }
    
    </style>
</head>


<div class="search-laser-by-attributes">
<!--pc-->
    <div>
        <div class="pc-home-search-laser">
            <div class="section-title">
                <div>FIND YOU IDEAL</div>
                <div>HOME LASER  JDJDDOPDJP DJDO</div>
            </div>
            <div class="search-info" id="search_info">
                <div class="search-title">
                    <div class="has-select-attributes" onclick="readySelect()">
                        <div class="search-condition" id="search_condition_all"></div>
                        <span class="search-info-value" id="search_info_0"></span>
                        <span class="search-info-value" id="search_info_1"></span>
                        <span class="search-info-value" id="search_info_2"></span>
                        <span class="search-info-value" id="search_info_3"></span>
                        <span class="search-info-value" id="search_info_4"></span>
                        <span class="search-info-value" id="search_info_5"></span>
                        <span class="search-info-value" id="search_info_6"></span>
                    </div>
                    <div class="search-btn" onclick="searchLaser()">Search</div>
                </div>
                <!--        可筛选的属性-->
                <div class="all-attributes all-attributes-none" id="all_attributes">
                    <!--            left-->
                    <div class="first-attributes">
                        <div class="first-attributes-item" id="first_attributes_0" onclick="selectFirstAttr('first_attributes_0','second_attributes_0')">Laserleistung</div>
                        <div class="first-attributes-item" id="first_attributes_1" onclick="selectFirstAttr('first_attributes_1','second_attributes_1')">Bearbeitungsfläche</div>
                        <div class="first-attributes-item" id="first_attributes_2" onclick="selectFirstAttr('first_attributes_2','second_attributes_2')">Laserbare Materialien</div>
                        <div class="first-attributes-item" id="first_attributes_3" onclick="selectFirstAttr('first_attributes_2','second_attributes_2')">Anwendung</div>
                        <div class="first-attributes-item" id="first_attributes_4" onclick="selectFirstAttr('first_attributes_2','second_attributes_2')">Lasertyp</div>
                        <div class="first-attributes-item" id="first_attributes_5" onclick="selectFirstAttr('first_attributes_2','second_attributes_2')">Fokusmodus</div>
                        <div class="first-attributes-item" id="first_attributes_6" onclick="selectFirstAttr('first_attributes_2','second_attributes_2')">LightBurn-Kompatibilität</div>
                    </div>
                    <!--            right-->
                    <div class="second-attributes">
                        <!--                    Laserleistung-->
                        <div class="second-attributes-classifiers" id="second_attributes_0">
                            <div class="second-attributes-item" id="Laserleistung_attributes_item_0"
                                 onclick="radioCheck('Laserleistung_attributes_item_0','Laserleistung_checked_outer_0', 'Laserleistung_attributes_value_0', 0)">
                                <span class="checked-outer" id="Laserleistung_checked_outer_0"></span>
                                <span class="attributes-value" id="Laserleistung_attributes_value_0">130W</span>
                            </div>
                            <div class="second-attributes-item" id="Laserleistung_attributes_item_1"
                                 onclick="radioCheck('Laserleistung_attributes_item_1','Laserleistung_checked_outer_1', 'Laserleistung_attributes_value_1', 0)">
                                <span class="checked-outer" id="Laserleistung_checked_outer_1"></span>
                                <span class="attributes-value" id="Laserleistung_attributes_value_1">100W</span>
                            </div>
                            <div class="second-attributes-item" id="Laserleistung_attributes_item_2"
                                 onclick="radioCheck('Laserleistung_attributes_item_2','Laserleistung_checked_outer_2', 'Laserleistung_attributes_value_2', 0)">
                                <span class="checked-outer" id="Laserleistung_checked_outer_2"></span>
                                <span class="attributes-value" id="Laserleistung_attributes_value_2">80W</span>
                            </div>
                            <div class="second-attributes-item" id="Laserleistung_attributes_item_3"
                                 onclick="radioCheck('Laserleistung_attributes_item_3','Laserleistung_checked_outer_3', 'Laserleistung_attributes_value_3', 0)">
                                <span class="checked-outer" id="Laserleistung_checked_outer_3"></span>
                                <span class="attributes-value" id="Laserleistung_attributes_value_3">700 * 300</span>
                            </div>
                            <div class="second-attributes-item" id="Laserleistung_attributes_item_4"
                                 onclick="radioCheck('Laserleistung_attributes_item_4','Laserleistung_checked_outer_4', 'Laserleistung_attributes_value_4', 0)">
                                <span class="checked-outer" id="Laserleistung_checked_outer_4"></span>
                                <span class="attributes-value" id="Laserleistung_attributes_value_4">700 * 100</span>
                            </div>
                        </div>
                        <!--                    Bearbeitungsfläche-->
                        <div class="second-attributes-classifiers second-attributes-none " id="second_attributes_1">
                            <div class="second-attributes-item" id="Bearbeitungs_attributes_item_0"
                                 onclick="radioCheck('Bearbeitungs_attributes_item_0','Bearbeitungs_checked_outer_0', 'Bearbeitungs_attributes_value_0', 1)">
                                <span class="checked-outer" id="Bearbeitungs_checked_outer_0"></span>
                                <span class="attributes-value" id="Bearbeitungs_attributes_value_0">1400mm x 900mm</span>
                            </div>
                            <div class="second-attributes-item" id="Bearbeitungs_attributes_item_1"
                                 onclick="radioCheck('Bearbeitungs_attributes_item_1','Bearbeitungs_checked_outer_1', 'Bearbeitungs_attributes_value_1', 1)">
                                <span class="checked-outer" id="Bearbeitungs_checked_outer_1"></span>
                                <span class="attributes-value" id="Bearbeitungs_attributes_value_1">1300mm x 900mm</span>
                            </div>
                            <div class="second-attributes-item" id="Bearbeitungs_attributes_item_2"
                                 onclick="radioCheck('Bearbeitungs_attributes_item_2','Bearbeitungs_checked_outer_2', 'Bearbeitungs_attributes_value_2', 1)">
                                <span class="checked-outer" id="Bearbeitungs_checked_outer_2"></span>
                                <span class="attributes-value" id="Bearbeitungs_attributes_value_2">110mm x 110mm</span>
                            </div>
                        </div>
                        <!--                    Laserbare Materialien-->
                        <div class="second-attributes-classifiers second-attributes-none " id="second_attributes_2">
                            <div class="second-attributes-item" id="LaserMaterial_attributes_item_0"
                                 onclick="radioCheck('LaserMaterial_attributes_item_0','LaserMaterial_checked_outer_0', 'LaserMaterial_attributes_value_0', 2)">
                                <span class="checked-outer" id="LaserMaterial_checked_outer_0"></span>
                                <span class="attributes-value" id="LaserMaterial_attributes_value_0">Metall</span>
                            </div>
                            <div class="second-attributes-item" id="LaserMaterial_attributes_item_1"
                                 onclick="radioCheck('LaserMaterial_attributes_item_1','LaserMaterial_checked_outer_1', 'LaserMaterial_attributes_value_1', 2)">
                                <span class="checked-outer" id="LaserMaterial_checked_outer_1"></span>
                                <span class="attributes-value" id="LaserMaterial_attributes_value_1">Nichtmetall</span>
                            </div>
                        </div>
                        <!--                    Anwendung-->
                        <div></div>
                        <!--                    Lasertyp-->
                        <div></div>
                        <!--                    Fokusmodus-->
                        <div></div>
                        <!--                    LightBurn-Kompatibilität-->
                    </div>
                </div>
            </div>
        </div>
        <!--        pc产品展示-->
        <div class="find-laser-wrapper find-laser-wrapper-none" id="DE_product_list">
            <div class="de-laser-list-wrapper">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="/" class="de-laser-product-item">
                                <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                                <div class="de-laser-pro-name">product name</div>
                                <div class="de-laser-pro-info">product info-value</div>
                                <div class="de-laser-selling-point">
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                </div>
                                <div class="authentication-img">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/" class="de-laser-product-item">
                                <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                                <div class="de-laser-pro-name">product name</div>
                                <div class="de-laser-pro-info">product info-</div>
                                <div class="de-laser-selling-point">
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                </div>
                                <div class="authentication-img">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/" class="de-laser-product-item">
                                <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                                <div class="de-laser-pro-name">product name</div>
                                <div class="de-laser-pro-info">product info-value</div>
                                <div class="de-laser-selling-point">
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                </div>
                                <div class="authentication-img">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/" class="de-laser-product-item">
                                <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                                <div class="de-laser-pro-name">product name</div>
                                <div class="de-laser-pro-info">product info-value</div>
                                <div class="de-laser-selling-point">
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                </div>
                                <div class="authentication-img">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/" class="de-laser-product-item">
                                <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                                <div class="de-laser-pro-name">product name</div>
                                <div class="de-laser-pro-info">product info-value</div>
                                <div class="de-laser-selling-point">
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                    <div class="selling-point-text">selling-point</div>
                                </div>
                                <div class="authentication-img">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                                    <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
<!--        mobile-->
        <div class="find-laser-wrapper find-laser-wrapper-none" id="mobile_DE_product_list">
            <div class="swiper-slide">
                <a href="/" class="de-laser-product-item">
                    <img class="product-img" src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                    <div class="de-laser-pro-name">product name</div>
                    <div class="de-laser-pro-info">product info-value</div>
                    <div class="de-laser-selling-point">
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                    </div>
                    <div class="authentication-img">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/" class="de-laser-product-item">
                    <img  class="product-img" src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                    <div class="de-laser-pro-name">product name</div>
                    <div class="de-laser-pro-info">product info-value</div>
                    <div class="de-laser-selling-point">
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                    </div>
                    <div class="authentication-img">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/" class="de-laser-product-item">
                    <img  class="product-img" src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                    <div class="de-laser-pro-name">product name</div>
                    <div class="de-laser-pro-info">product info-value</div>
                    <div class="de-laser-selling-point">
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                    </div>
                    <div class="authentication-img">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="/" class="de-laser-product-item">
                    <img  class="product-img" src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/AFseries_238x182.png?v=1652341486" alt="">
                    <div class="de-laser-pro-name">product name</div>
                    <div class="de-laser-pro-info">product info-value</div>
                    <div class="de-laser-selling-point">
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                        <div class="selling-point-text">selling-point</div>
                    </div>
                    <div class="authentication-img">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/FDA.jpg?v=1661164327" alt="">
                        <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/sgs.jpg?v=1661164327" alt="">
                    </div>
                </a>
            </div>
        </div>
    </div>
   
<!--    mobile-->
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>
<script>
    $(document).ready(function(){
        $(window).resize(function() {//当浏览器大小变化时
            if ($(window).width() > 899 ) {
                var mobileProductListPC = $('#mobile_DE_product_list') // 对应的检索出的product list - pc端
                mobileProductListPC.addClass('find-laser-wrapper-none')
            } else {
                var productListPC = $('#DE_product_list') // 对应的检索出的product list - mobile端
                productListPC.addClass('find-laser-wrapper-none')
            }
        });
    })
    // 默认选中第一条属性
    var firstAttributeSelect = document.getElementById('first_attributes_0')
    firstAttributeSelect.classList.add('first-attributes-active')
    
    var searchInfoArr = [] // 检索条件集合
    
    // 找到左右选中的属性，并获取其innerText展示在搜索框中
    var hasSelectAttrs = document.getElementsByClassName('')
    
    var attribute = document.getElementById('all_attributes') // 查找到属性box
    var searchInfo = document.getElementById('search_info') // 查找到属性box
    // 点击搜索框 展示下方所有属性条件 - mobile点击事件
    function readySelect () {
        // 获取当前窗口宽度
        if  ( $(window).width() < 900) {
            console.info('in mobile can click')
        }
    }
    // 搜索
    function searchLaser () {
        attribute.classList.add('all-attributes-none')
        var searchConditionAll = $('#search_condition_all') // 对应的search info value 最后结果筛选
        if (searchConditionAll.text().length === 0) { // 没有选中商品属性时不检索
            return false
        }
        // 获取当前窗口宽度
        if  ( $(window).width() > 899) { //pc端
            // 检索后product list展示
            var productListPC = $('#DE_product_list') // 对应的检索出的product list - pc端展示
            productListPC.removeClass('find-laser-wrapper-none')
        } else { // mobile 端
            var productListMobile = $('#mobile_DE_product_list') // 对应的检索出的product list - pc端展示
            productListMobile.removeClass('find-laser-wrapper-none')
        }
       
    }
    // 监听属性box鼠标移出事件 鼠标移出 属性选择隐藏
    function mouseFunction () {
        attribute.classList.add('all-attributes-none')
    }
    // 在mouseover事件中判断鼠标是从元素内部移出
    searchInfo.onmouseout = function (e) {
        var e = e || window.event;
        //e.fromELement兼容IE
        var eFrom = e.fromElement || e.relatedTarget;
        if (searchInfo.contains(eFrom)) {
            attribute.classList.add('all-attributes-none')
        }
    };
    // 在mouseout事件中判断鼠标是否在元素内部移动
    searchInfo.onmouseover = function (e) {
        var e = e || window.event;
        //e.fromELement兼容IE
        var eTo = e.toElement || e.relatedTarget;
        if (searchInfo.contains(eTo)) {
            attribute.classList.remove('all-attributes-none')
        }
    };
    /**
     * 选中一级属性事件
     *  @params secondAttrId 二级属性id
     */
    function selectFirstAttr (selfId, secondAttrId) {
        var firstAttr = $('#' + selfId)
        var secondAttr = $('#' + secondAttrId)
        // 选中的一级属性 添加选中样式 兄弟元素去除选中选中状态
        firstAttr.addClass('first-attributes-active').siblings().removeClass('first-attributes-active');
        // 对应的二级属性展示 , 兄弟元素隐藏
        secondAttr.removeClass('second-attributes-none').siblings().addClass('second-attributes-none');
    }
    /**
     * 选中二级属性事件
     * @param selfId 选中的radio
     * @param selectedId 选中的radio
     * @param valueId 选中的属性值
     * @param index 选中的第几个以及属性 按照下标划分 （用于更改搜索框中回显的属性值）
     */
    function radioCheck (selfId, selectedId, valueId, index) {
        var selectedIdItem =  $('#' + selectedId) // 选中的属性radio
        var attributeValue =  $('#' + valueId) // 选中的属性value
        var searchInfoIndex = $('#' + 'search_info_' + index) // 对应的search item info value （选中后回显）
        var searchConditionAll = $('#search_condition_all') // 对应的search info value 最后结果筛选
        
        // 判断点击的是否是已选中的属性 已选中时取消选中 未选中的添加选中样式
        var selectflag = selectedIdItem.hasClass('checked-outer-active')
        if (selectflag) {
            // 选中的二级属性 添加选中样式
            selectedIdItem.removeClass('checked-outer-active')
            // 更改搜索框中的文字
            searchInfoIndex.text('')
        } else {
            // 选中的二级属性 添加选中样式
            selectedIdItem.addClass('checked-outer-active')
            // 兄弟元素去除选中选中状态
            $('#' + selfId).siblings().children('.checked-outer').removeClass('checked-outer-active');
           
            searchInfoIndex.text(attributeValue.text()) // 检索单个选中条件
            // 更改搜索框中的文字
            var searchArr = document.getElementsByClassName('search-info-value')
            searchInfoArr = []
            for (var i = 0;i<searchArr.length;i++) {
                if (searchArr[i].innerText !== '') {
                    str = searchArr[i].innerText
                    searchInfoArr.push(str)
                }
            }
            searchConditionAll.text(searchInfoArr.join(' / '))
        }
    }

    /**
     * swiper
     */
    var mySwiper = new Swiper ('.swiper', {
        slidesPerView: 3,
        // spaceBetween: 15,
        slidesPerGroup: 2,
        loop: false,
        loopFillGroupWithBlank: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
    
</script>

效果如图：

鼠标移入移出移出事件:

鼠标移入移出移出事  js鼠标悬浮事件

//支持冒泡：

移入：mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

移出：mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。


// 不支持冒泡（不包含子元素）：

移入：mouseenter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

移出：mouseleave ：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

是html鼠标悬浮属性
// onmouseenter和onmouseleave事件不支持冒泡，不包含子元素
 - onmouseleave 事件在鼠标移出元素时触发。
 - onmouseenter 事件在鼠标指针移动到元素上时触发。


// onmouseover和onmouseout支持冒泡，事件会包含子元素
 - onmouseover 事件会在鼠标指针移动到指定的元素上时发生。
 - onmouseout   事件会在鼠标指针移出指定的对象时发生。