CSS按钮hove变色 | 回到顶部 | 指定区域外点击，关闭指定区域| 设置导航高亮

1.按钮hover上去变色（渐变，从底部向上变）

.btn-item {

                position: relative;

                span {
                    z-index: 100;
                    position: relative;
                }
            }

.btn-item::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                display: block;
                height: 0;
                width: 100%;
                transition: height .35s ease-in-out;
            }

.btn-item:hover::after {
                height: 100%;
                background-color: #d10c1a;
                border: 2px solid #d10c1a;
                transition: height .35s ease-in-out;
            }

2.回到顶部

2.1 html部分

<div class="to-top" id="scrollTop">
    <span class="iconfont iconziyuan"></span>
</div>

css部分

// 回到顶部按钮
.to-top {
    width: 42px;
    height: 35px;
    line-height: 35px;
    background: rgba(230, 0, 16, 1);
    border-radius: 4px;
    position: fixed;
    right: 73px;
    bottom: 448px;
    text-align: center;
    z-index: 1000;

    .iconfont {
        font-size: 20px;
        color: #fff;

    }
}

.to-top:hover {
    cursor: pointer;
}

js部分

 $("#scrollTop").click(function () {

        $("body,html").animate({
            scrollTop: 0
        }, 800);

});

3.指定区域外点击，关闭指定区域

    $(document).mouseup(function (e) {
        if ($(e.target).parent(".proOne").length == 0) {
            $(".proOne").hide("fast");
        }
    })

上面的jquery代码的意思是：当在页面中释放鼠标按键，触发function函数。找到触发事件的包含着所有匹配元素的唯一父元素的元素集合，判断找到元素的个数。如果等于0，刚代表不在指定区域内，关闭指定层。

 

4.导航高亮，js设置多个css样式

 $(".header .header1 .nav-wrap .nav-wrap .nav-list .nav-item:nth-child(5)>a").css({
        "color": "#e60010",
        "border-bottom": "2px solid #e60010",
        "padding-bottom": "32px",
    })