首页 > 解决方案 > 我将 Anchor 标签设为按钮,但它不起作用

问题描述

我试图将锚标记作为按钮并尝试在其上添加一些 css 但它不可点击这是我的 html 代码。我正在关注一个 youtube 教程,我 100% 关注了视频,但我的不工作,对不起,我只是网络开发的新手,谢谢你的帮助。

    <body>
      <!-- Welcome Page -->
      <section id="ulambg"> 
        <div class="ulambg container">
          <div>
            <h1>Eatwell</h1>
            <a href="#" type="button" class="btnulam">Ready to Eat</a>
            <a href="#" type="button" class="btn btn-primary">Ready to Cook</a>
          </div>
        </div>
      </section>
    
      <!-- End Welcom Page -->

而这是我在程序中使用的css,是不是因为Java?我读了一些论坛,说如果你在你的机器上禁用了你的java,一些java函数将无法工作。

    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        font-size: 15px;
        font-family: 'Raleway', sans-serif ;
    }
    
    a {
        text-decoration: none;
    }
    
    .container { 
        min-height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
     }
     
    
    /*Welcome Page Section Ulambg*/
    #ulambg { 
        background-image: url(./img/bg.jpg);
        background-size: cover;
        background-position: top center;
        position: relative;
     }
     #ulambg::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: .5;
     }
    
     #ulambg h1 {
        color: white;
        width: fit-content;
        font-size: 4rem;
        position: relative;
    
     }
    
     #ulambg .btnulam {
        display: inline-block;
        padding: 10px 30px;
        color: blue;
        background-color: transparent;
        border: 2px solid blue;
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: .1rem;
        margin-top: 30px;
        transition: .3s ease;
        transition-property: background-color;
     }
    
     #ulambg .btnulam:hover {
        color: white;
        background-color: blue;
     }
    
    
    /*Welcome Page Sectio Ulambg*/

标签: phpcssfrontend

解决方案


添加z-index: -1#ulambg::after它的背景,不应该覆盖页面。

演示


推荐阅读