Html Question posted in
Some basic documentation can be found here.

Can't click though HTML element to buttons

I’m working on a portfolio website and want to click a few buttons towards the middle of the page that reference course names, but I’m unable to click through the element, even with pointer-events:none. Any advice would be appreciated!

* {
    margin: 0;
    padding: 0;
}

html {
    pointer-events: none;
}

body {
    background-color: #2D2D2D;
    color: #ffffff;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    font-family: "Krub", sans-serif;
    pointer-events: none;
}

a, button {
    color: #ffffff; 
}

#nav-bar {
    width: 19%;
    height: 233vh;
    background-color: #212020;
    opacity: 70%;
    position: sticky;
    left: 0;
}

main {
    width: 81%;
    right: 15.5%;
}

#bg-img {
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 233vh;
    left: 20%;
    top: 0;
    background-image: url("bg-photo.jpg");
    background-repeat: repeat-y;
    display: flex;
    justify-content: center;
}

#main-container {
    background-color: #212020;
    width: 70%;
    top: 10%;
    right: 10.5%;
    height: 210vh;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#photo-timeline {
    margin: 6em 3em 6em 6em;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#main-content {
    margin: 11em 6em 6em 3em;
    text-align: center;
}

h1 {
    font-size: 5rem;
    font-weight: 200;
}

.circle, .mybtn, #profile-photo img {
    border-radius: 50%;
    margin-bottom: -1%;
}

.mybtn {
    width: 13em;
    height: 13em;
    border: 0.5em solid #ffffff;
    background-color: #212020;
}

.mybtn:hover {
    background: #ffffff !important;
    color: #212020;
}

.line {
    background-color: #ffffff;
    height: 6em;
    width: 0.6em;
}

#first {
    height: 7em;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Elsa Frankel - Math Portfolio</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <nav id="nav-bar">
            <p id="nav-title">Contact + Documents</p>
            <hr>
            <div class="contact-link" id="linkedin">
                <a href="">LinkedIn Page</a>
            </div>
            <div class="contact-link" id="tiktok">
                <a href="">TikTok Page</a>
            </div>
            <div class="contact-link" id="email">
                <a href="">Email Address</a>
            </div>
            <p id="nav-subtitle">Projects</p>
            <div class="project-case">
                <a hef="">L-Systems Lecture - Fall 2022</a>
                <a hef="">Diffie-Hellman Key Exchange Lecture - Spr 2023</a>
            </div>
        </nav>
        <div class="main">
            <div id="bg-img">
                <div id="main-container">
                    <aside id="main-content">
                        <div id="header-info">
                            <h1>Elsa Selin Frankel</h1>
                            <h2>Mathematics Student at Wellesley College</h2>
                        </div>
                        <div id="about-me">
                            <p id="math-info">
                                Hi! I am a first-year undergraduate student with a deep passion for
                                mathematical study. For the spring 2024 semester, I&#39m taking courses 
                                in abstract algebra (MATH 305), number theory (MATH 223) and multivariable
                                calculus (MATH 205). I hope to begin my first formal research project 
                                during the summer of 2024.<br><br>As an early undergraduate, my research 
                                interests are indeed widespread. However, I am currently quite curious 
                                about studies in algebra, representation theory, graph theory, and number 
                                theory.<br><br>Outside of my academic commitments, I enjoy attending public math 
                                seminars at local Boston-area colleges. While much of the content is over 
                                my head at this point, I find the community and topics utterly fascinating 
                                and inspiring.
                            </p>
                            <p id="other-info">
                                I also love designing building websites in my free time. Aside from this 
                                “math portfolio” website I&#39m working on a <strong>graph generator</strong> and an 
                                interactive <strong>dihedral group showcase</strong>.<br><br> Additionally, during the 2023 HackMIT 
                                hackathon, I collaborated on a project titled “Dyscalcutech.” Our vision 
                                was to build a completely visual math education website to help students 
                                with Dyscalculia access topics ranging from elementary to college-level. 
                                (the project remains in development currently)<br><br> *** <br><br>in 2022, I started a 
                                TikTok account, @trigonometrykid, to share my mathematical journey. 
                                The page quickly progressed from a small-scale hobby when a video of a 
                                “unit circle value filter” I created went viral, reaching 3.7M views as 
                                of February 2024. I&#39m inspired every day by the community surrounding 
                                the page, and love creating content that makes college mathematics 
                                feel more “fun” and accessible to viewers.<br><br>I&#39m grateful and excited 
                                to announce that I&#39ll be partnering with <strong><a>Niche.com</a></strong> in March of 2024 
                                to offer a $2000 no-essay scholarship titled the 
                                <strong>“Unit Circle Scholars Fund.”</strong>
                            </p>
                        </div>
                    </aside>
                    <div id="photo-timeline">
                        <div class="circle" id="profile-photo">
                            <img src="profile.png">
                        </div>
                        <div class="line" id="first">
                        </div>
                        <button class="mybtn circle">
                            <p class="course-name" id="305">MATH 305</p>
                            <p class="course-name" id="abstract-algebra">abstract algebra</p>
                            <p class="year">2024</p>
                        </button>
                        <div class="line">
                        </div>
                            <button class="mybtn circle">
                                <p class="course-name" id="223">MATH 223</p>
                                <p class="course-name" id="number-theory">number theory</p>
                                <p class="year">2024</p>
                            </button>
                        <div class="line">
                        </div>
                        <div class="circle course-selector">
                            <button class="mybtn">
                                <p class="course-name" id="205">MATH 205</p>
                                <p class="course-name" id="multivariable-calculus">multivariable calculus</p>
                                <p class="year">2024</p>
                            </button>
                        </div>
                        <div class="line">
                        </div>
                        <div class="circle course-selector">
                            <button class="mybtn">
                                <p class="course-name" id="206">MATH 206</p>
                                <p class="course-name" id="linear-algebra">linear algebra</p>
                                <p class="year">2023</p>
                            </button>
                        </div>
                        <div class="line">
                        </div>
                        <div class="circle course-selector">
                            <button class="mybtn">
                                <p class="course-name" id="305">MATH 225</p>
                                <p class="course-name" id="graph-theory-combinatorics">graph theory & combinatorics</p>
                                <p class="year">2023</p>
                            </button>
                        </div>
                        <div class="line">
                        </div>
                        <div class="circle course-selector">
                            <button class="mybtn">
                                <p class="course-name" id="3700">MATH 3700</p>
                                <p class="course-name" id="honors-discrete-mathematics">honors discrete mathematics</p>
                                <p class="year">2022-23</p>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

If working, hovering over each button should change the background and text color!

Tags:

2

Answers


  1. 0

    To solve this issue, you should remove pointer-events: none; from the html and body selectors in your CSS. Instead, you can selectively apply pointer-events: none; only to elements where you explicitly want to disable mouse interactions, if necessary.

    body {
   background-color: #2D2D2D;
   color: #ffffff;
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: row;
   font-family: "Krub", sans-serif;
   /* Remove pointer-events: none; */
}
    Login or Signup to reply.
  2. 0

    Add link inside element, example <div><a href="www.google.com">Link to google</a></div>.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search