按钮不可点击 - 可能的原因？

Question

我为我的页面制作了一个按钮，但它无法点击。指针甚至没有出现。为什么会这样？我该如何解决？

另外，我是否正确地将.intro和#more居中？我觉得有一个比这更好的方式，也会更敏感，但我不确定。一些提示会很棒！

非常感谢。

/*Continut centru*/

#continut {
    padding-top: 250px;
    font-family: 'Roboto Condensed', sans-serif;
    width: 100%;
    user-select: none;
    pointer-events: none; 
}

#intro {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 300px;
    text-align: center;
}

.intro {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    max-width: 700px;
    margin: 0 auto;
    line-height: 30px;
}

/*Buton MORE*/

#more {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    border: #77dff1 2px solid;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    display: inline-block;
    font-size: 2rem;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

<div id="continut">
            <h1 id="intro">hi</h1>
            <h6 class="intro">asdf</h6>>
                <button type="button" href="#" id="more">More...</button>
        </div>

Answer 1

您的父div [{1}}的{​​{1}}为#continut，这就是pointer-events的默认鼠标事件为none的原因，以覆盖您的身份你button规则。

none

!important

Answer 2

＆＃13;

＆＃13;

/*Continut centru*/

#continut {
    padding-top: 250px;
    font-family: 'Roboto Condensed', sans-serif;
    width: 100%;
    user-select: none;
}

#intro {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 300px;
    text-align: center;
}

.intro {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    max-width: 700px;
    margin: 0 auto;
    line-height: 30px;
}

/*Buton MORE*/

#more {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    border: #77dff1 2px solid;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    display: inline-block;
    font-size: 2rem;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    z-index: 1;
    cursor: pointer;
}

＆＃13;

<div id="continut">
            <h1 id="intro">hi</h1>
            <h6 class="intro">asdf</h6>>
                <button type="button" href="#" id="more">More...</button>
        </div>

＆＃13;

＆＃13;

＆＃13;