'Cursor Issue in CSS [closed]

I am a building a website in just HTML & CSS and have run into an issue. I am trying to apply cursor:pointer on the button in the hero section. When I hover over the button, the cursor doesn't point over the button as it should. enter image description here

#hero-section {
  background: url('../images/Hero\ section.jpg') center center/cover;
  height: 90vh;
  position: relative;
  z-index: -2;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 45%;
  z-index: -1;
}

.break {
  display: block;
}

.hero-content {
  padding-top: 18vh;
  text-align: center;
}

.hero-title {
  font-size: 60px;
  font-family: 'Playfair Display', sans-serif;
  color: #fff;
  margin-bottom: 2rem;
}

.btn-primary {
  background: #A841A1;
  color: #fff;
  border: none;
  padding: 1.25rem;
  font-size: 16px;
  cursor: pointer;
}
<!-- Hero section -->
<section id="hero-section">
  <div id="overlay"></div>
  <div class="hero-content">
    <h1 class="hero-title">Experience The Best Beauty <span class="break">Services</span></h1>
    <button class="btn-primary">BOOK YOUR TREATMENT</button>
  </div>
</section>
javascripthtmlcss


Solution 1:[1]

After a couple of hours of trying, I realized I that I should have added a position relative to the .hero-content and give it a z-index value that's greater than the #hero-section and #overlay.

Solution 2:[2]

It works when you remove the definition of position: relative in #hero-section style.

document.getElementById('button').addEventListener('click', function() {
  console.clear();
  console.log("Clicked!");
});
#hero-section {
    /* background: url('../images/Hero\ section.jpg') center center/cover; */
    height: 90vh;
    /* position: relative; */
    z-index: -2;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 45%;
  z-index: -1;
}
.break {
  display: block;
}
.hero-content {
  padding-top: 18vh;
  text-align: center;
}
.hero-title {
  font-size: 60px;
  font-family: 'Playfair Display', sans-serif;
  color: #fff;
  margin-bottom: 2rem;
}
.btn-primary {
  background: #A841A1;
  color: #fff;
  border: none;
  padding: 1.25rem;
  font-size: 16px;
  cursor: pointer;
}
<section id="hero-section">
    <div id="overlay"></div>
    <div class="hero-content">
        <h1 class="hero-title">Experience The Best Beauty
            <span class="break">Services</span>
        </h1>
        <button id="button" class="btn-primary">BOOK YOUR TREATMENT</button>
    </div>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ope Afolabi
Solution 2

Related Questions