链接不起作用，不可点击

我在网站上使用我的'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

链接不起作用，不可点击

回答

相关问题