网页布局------鼠标悬停标签切换内容

页面结构

            <div class="body-brick">
                <div class="body-brick-title">
                    <h2 class="body-brick-title-h2"> 生活电器</h2>
                    <div class="body-brick-title-right">
                        <ul>
                            <li>电暖器</li>
                            <li>扫地机</li>
                            <li>空净</li>
                            <li>清洁</li>
                        </ul>
                    </div>
                </div>
                <div class="body-brick-content">
                    <div class="body-brick-content-left">
                        <ul>
                            <li><a> <img src="./images/3d47879ec183e25a36e67e0219636e60.jpg" /> </a></li>
                            <li><a> <img src="./images/3d47879ec183e25a36e67e0219636e60.jpg" /> </a></li>
                        </ul>

                    </div>
                    <div class="body-brick-content-right">
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <!-- <li class="body-brick-content-right-li">
                                <ul>
                                    <li>
                                        <a>
                                            <div class="body-brick-content-right-li-left">
                                                <h3>米家迷你波轮洗衣机Pro 3kg</h3>
                                                <p>1599元</p>
                                            </div>
                                            <div class="body-brick-content-right-li-right">
                                                <img src="./images/b8c63a2024528fe5410ebe669b7d2407.jpg">
                                            </div>

                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <div class="body-brick-content-right-li-left">
                                                <h3>米家迷你波轮洗衣机Pro 3kg</h3>
                                                <p>1599元</p>
                                            </div>
                                            <div class="body-brick-content-right-li-right">
                                                <img src="./images/b8c63a2024528fe5410ebe669b7d2407.jpg">
                                            </div>

                                        </a>
                                    </li>
                                </ul>
                            </li> -->
                        </ul>
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>

                        </ul>
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

页面样式

.body-contaner{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}
.body-content{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    /* background-color: antiquewhite; */
    padding: 4px 0 12px;
}
body-brick{
    margin-bottom: 8px;
    clear: both;
}
.body-brick-title{
    width: 1226px;
    height: 58px;
    /* background-color: #e0e0e0; */

}
.body-brick-title-h2{
    float: left;
    /* text-align: center; */
    line-height: 58px;
    font-weight: 200;
    font-size: 22px;
}
.body-brick-title-right{
    float: right;
    width: 280px;
    height: 58px;
    /* background-color: #FF6700; */
    /* line-height: 58px; */

}
.body-brick-title-right>ul{
    
    width: 280px;
    height: 41px;
   
    padding: 16px 0 0;
}
.body-brick-title-right>ul>li{
    float: left;
    width: 48px;
    height: 24px;
    margin-left: 22px;
}
.body-brick-title-right-ul-li-hover{
    color: #FF6700; 
 border-bottom: 2px solid #FF6700;
}
/* 标签悬浮切换 */



.body-brick-content{
    height: 614px;
    /* background-color: #FF6700; */
}
.body-brick-content-left{
    width: 234px;
    height: 614px;
    float: left;
    /* background-color: #aaa; */
}
.body-brick-content-left>ul>li{
    width: 234px;
    height: 300px;
    margin: 0 0 14px 0px;
}
.body-brick-content-left>ul>li>img{
    width: 100%;
    height: 100%;
}
.body-brick-content-left>ul>li>a{
    display: block;
    width: 234px;
    height: 300px;
}
.body-brick-content-left>ul>li:nth-child(1){
    margin-bottom: 14px;
}
.body-brick-content-left>ul>li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}
.body-brick-content-right{
    width: 992px;
    height: 628px;
    /* background-color: #FF6700; */
    float: left;
}
.body-brick-content-right>ul{
    /* margin: 0 0  -14px 14px; */
}
.body-brick-content-right-ul-li{
    float: left;
    background-color: #fff;
    width: 234px;
    height: 260px;
    padding: 20px 0;
    margin: 0 0 14px 14px;
}
.body-brick-content-right>ul>li>a{
    display: block;
    width: 234px;
    height: 260px;
    /* padding: 20px 0; */
}
.body-brick-content-right-div{
    width: 160px;
    height: 160px;
    margin: 0 37px 18px;

}
.body-brick-content-right-div img{
    width: 100%;
    height: 100%;
}
.body-brick-content-right>ul>li>a>h2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    margin: 0 10px 2px;
}
.body-brick-content-right-text1{
    font-size: 12px;
    color: #b0b0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px 10px;
}
.body-brick-content-right-text2{
    font-size: 12px;
    color: #FF6700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px 14px;
}
.body-brick-content-right-li1{
    width: 234px;
    height: 93px;
    margin: 0 0 14px 14px;
    background-color: #ff6700;
}
.body-brick-content-right-li2{
    width: 234px;
    height: 93px;
}
.body-brick-content-right-li{
    float: left;
    width: 234px;
    height:300px;
}
.body-brick-content-right-li>ul>li{
    width: 234px;
    height: 143px;

    margin: 0 0 14px 14px;
    background-color: #fff;
}
.body-brick-content-right-li>ul>li>a{
    display: block;
    width: 234px;
    height: 93px;
    padding-top: 50px;
}
.body-brick-content-right-li-left{
    width: 94px;
    height: 32px;
    margin-left: 30px;
}
.body-brick-content-right-li-left>h3{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
}
.body-brick-content-right-li-left>p{
    font-size: 12px;
    color: #FF6700;
}
.body-brick-content-right-li-left{
    float: left;
}
.body-brick-content-right-li-right{
    width: 80px;
    height: 80px;
    float: left;
    margin-left: 15px;
    margin-top: -10px;
}
.body-brick-content-right-li-right>img{
    width: 100%;
    height: 100%;
}
.body-brick-content-right-ul-li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}
.body-brick-content-right-li>ul>li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}

实现功能

$(function() {
    // 悬浮切换标签
    $(".body-brick-content-right ul:gt(0)").hide();
    $('.body-brick-title-right li').css("cursor","pointer");
    $('.body-brick-title-right li').hover(
        function(){
            $(this).addClass("body-brick-title-right-ul-li-hover");
        },
        function(){
            $(this).removeClass("body-brick-title-right-ul-li-hover");
        }
    ).mouseover(function(){
        $('.body-brick-content-right ul' ).eq($(this).index()).siblings().hide().end().show();
    })
})

在上述代码中，使用“:gt(0)”后面跟hide()，将除自身之外的所以标签内容隐藏，也就是显示第一个标签内容

使用hover方法时需要设置两个函数，用来设置鼠标离开和悬浮的效果，使用addClass和remooveClass添加class元素

使用mouseover定义鼠标离去时的操作，eq获取当前index，使用siblings和hide方法隐藏出来当前index的其他内容，使用end和show返回上一步筛查并显示当前index对应的内容