Elsa
Reputation: 45
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'm 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'm 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'm 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'm grateful and excited
to announce that I'll 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!
Upvotes: 2
Views: 126
Answers (5)
iorgu
Reputation: 3043
Not the best approach in regards of caniuse (see my other answer, which is better). In this case you just have to add pointer-events: all; to the .mybtn and to the #nav-bar for them to be clickable (to allow click on the "children"), like so:
* {
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;
pointer-events: all;
}
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;
pointer-events: all; /*new code*/
}
.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'm 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'm 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'm 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'm grateful and excited
to announce that I'll 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>Upvotes: 0
iorgu
Reputation: 3043
Here's a second version (which I couldn't include in my previous answer because the content would've been too long) without pointer-events. We just had to rearrange the z-indexs. That is: z-index: 0 to #bg-img, and z-index: 1 to #nav-bar), like so:
* {
margin: 0;
padding: 0;
}
body {
background-color: #2D2D2D;
color: #ffffff;
width: 100%;
height: auto;
display: flex;
flex-direction: row;
font-family: "Krub", sans-serif;
}
a, button {
color: #ffffff;
}
#nav-bar {
width: 19%;
height: 233vh;
background-color: #212020;
opacity: 70%;
position: sticky;
left: 0;
z-index: 1; /*change here*/
}
main {
width: 81%;
right: 15.5%;
}
#bg-img {
position: absolute;
z-index: 0; /*and change here also*/
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'm 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'm 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'm 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'm grateful and excited
to announce that I'll 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>Upvotes: 0
Lajos Arpad
Reputation: 76968
I removed the cursor pointer events none rule, the z-index: -1 rule which was pushing other content in front of your items, preventing the events from triggering, added a hover rule for CSS and a button click event for your items that alerts the course data:
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #2D2D2D;
color: #ffffff;
width: 100%;
height: auto;
display: flex;
flex-direction: row;
font-family: "Krub", sans-serif;
}
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;
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;
}
.circle:hover {
background-color: lightgreen;
}
#first {
height: 7em;
}
</style>
<script>
window.addEventListener("load", function() {
for (let context of document.querySelectorAll(".mybtn.circle, .circle.course-selector")) {
context.addEventListener("click", function() {
let text = "";
for (let item of context.querySelectorAll("p")) {
text += item.innerText + "\n";
}
alert(text);
});
}
});
</script>
</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'm 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'm 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'm 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'm grateful and excited
to announce that I'll 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>Upvotes: 1
obankach
Reputation: 1
Add link inside element, example <div><a href="www.google.com">Link to google</a></div>.
Upvotes: 0
Sagar Tank
Reputation: 1
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; */
}
Upvotes: 0
Related Questions
- Retrieve the position (X,Y) of an HTML element
- How can I set the default value for an HTML <select> element?
- Change an HTML input's placeholder color with CSS
- How can I horizontally center an element?
- How do I create an HTML button that acts like a link?
- How can I select an element with multiple classes in jQuery?
- Why does HTML think “chucknorris” is a color?
- HTML 5: Is it <br>, <br/>, or <br />?
- HTML: Valid id attribute values?
- Click through div to underlying elements