鏈接不起作用，不可點擊

我在網站上使用我的'a'元素（按鈕）。他的位置在視頻部分。我不知道爲什麼不可點擊。我試過任何元素的變化定位，還有z-index。我正在使用bootstrap-3。代碼如下：鏈接不起作用，不可點擊

<section id="video"> 
    <div class="video-container"> 
    <h2>Hi I'm Matt </h2> 
    <h3> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum eum doloribus, consequuntur nihil quod pariatur dolor labore amet consequatur quia. 
    </h3> 
    <a href="#about-me">Let's start</a> 
    </div> 
    <video autoplay loop muted id="video"> 
    <source src="video/coding.webm" type="video/webm"> 
    <source src="video/coding.mp4" type="video/mp4"> 
    <source src="video/coding.ogg" type="video/ogg"> 
    </video> 
</section> 

     /* ************ LESS ************ */ 
    @small: ~'only screen and (min-width: 768px)'; 
    @medium: ~'only screen and (min-width: 992px)'; 
    @large: ~'only screen and (min-width: 1400px)'; 

    @brand-primary: #f6c664; 
    @bright-text-color: #FFF; 

    .relative { 
     position: relative; 
    } 

    .absolute { 
     position: absolute; 
    } 

    .inline-block { 
     display: inline-block; 
    } 

    .block { 
     display: block; 
    } 

    .upper { 
     text-transform: uppercase; 
    } 

    .heading-decor-line { 
     &:after { 
       content: ''; 
       .absolute; 
       .block; 
       top: 100px; 
       left: 15px; 
       width: 80px; 
       height: 6px; 
       z-index: -1; 
       background: @brand-primary; 
     } 
    } 

    .btn { 
     .upper; 
     font-weight: 700; 
     padding: 12px 20px; 
     font-size: 14px; 
     line-height: 1.4; 
     border-radius: 4px; 
    } 

    /* ************ STYLES ************ */ 
    #video { 
     .relative; 
     top: 20px; 
     right: 0; 
     bottom: 0; 
     width: 100%; 
     z-index: -10; 
     &:after { 
       content: ""; 
       z-index: 0; 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 100%; 
       height: 99%; 
       background: rgba(30, 30, 30, 0.8) none repeat scroll 0px 0px; 
     } 
    } 

    .video-container { 
     top: 30%; 
     left: 15%; 
     .absolute; 
     z-index: 1; 
    } 

    .video-container h2 { 
     font-size: 2rem; 
     margin: 0; 
     color: #FFF; 
     .relative; 
     z-index: 2; 
     text-transform: none; 
     .heading-decor-line; 
    } 

    .video-container a { 
     display: none; 
    } 

    .video-container h3 { 
     .relative; 
     .block; 
     top: 10px; 
     z-index: 2; 
     color: @bright-text-color; 
     font-size: 0.9rem; 
     width: 80%; 
     text-transform: none; 
     font-weight: 300; 
    } 

    .video-container { 
     @media @small { 
       h2 { 
        font-size: 5rem; 
        margin: 0px 0px 40px; 
       } 
       h3 { 
        font-size: 1.6rem; 
        top: 20px; 
       } 
       a { 
        .relative; 
        color: @bright-text-color; 
        background-color: @brand-primary; 
        text-decoration: none; 
        .inline-block; 
        z-index: 30; 
        .btn; 
        top: 30px; 
       } 
     } 
     @media @medium { 
       h2 { 
        font-size: 6rem; 
        margin: 0px 0px 70px; 
       } 
       h3 { 
        font-size: 2rem; 
        top: 20px; 
       } 
       a { 
        top: 60px; 
       } 
     } 
    }

在此先感謝您的幫助。

來源

2017-05-06 Matt Dar

嗨馬特，歡迎StackOverflow上。讓我給你一個提示：試着寫下你懷疑的問題，並用一種方式來幫助你，而不僅僅是幫助你，而是幫助未來的其他人。這也意味着你應該嘗試組織這個問題，以避免不必要的代碼，或者讓我們挖掘許多行來找到真正重要的東西。最好 –

首先，你的錨元素鏈接到哪裏？ href屬性指向#about-me的id。你的代碼中有哪些元素是id？

其次，如果你想使錨元素的按鈕，按引導，你需要添加BTN類，像這樣：

<a href="#about-me" class="btn btn-default">Let's start</a>

來源

2017-05-06 19:27:40 Mekicha

鏈接不起作用，不可點擊

回答

相關問題