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",
    })