Question

我和我的＆＃39; a＆＃39;网站上的元素（按钮）。他的位置在视频部分。我不知道为什么不可点击。我尝试在任何元素和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;
                }
         }
    }

提前感谢您的帮助。

Answer 1

首先，您的锚元素链接到哪里？ href属性指向id #about-me。您的代码中的哪个元素具有id？

其次，如果你想根据bootstrap使锚元素成为一个按钮，你需要像这样添加btn类：

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

链接不起作用，不可点击

1 个答案: