Having an Issue with hover not working with postcss/tailwind in certian instances

Question

Context: I am using postcss and tailwind bundled with webpack. I am trying to use a generic button module (styles in _btn.css) to use throughout a website I'm building. When I have the button inside a div with classes defined in another module (_hero.css), it recognizes the non hover btn styles. However, it doesn't respond to the hover pseudo class.

Problem: Below is a link to my GitHub repo:

https://github.com/mmelester/Janice-IntensiveHope-Website-Redo.git

The work is on the hero branch. Any help would be greatly appreciated. The html code is in src/index.html. The main css file is in src/styles/global/style.css. The 2 additional supporting css files are in src/styles/module/_hero.css and /_btn.css.

I tried using !Important in case it was a specificity issue. I tried putting the same hover style into the _hero.css file. I consulted with GPT, but everything it suggested I was already doing. If I use the btn class outside of the div (with styles defined in _hero.css), it works fine.

The hover style was to change the opacity of the background button. The second btn instance works as expected.

Answer 1

The .hero__hero-image--hero-overlay element is overlapping all the elements, preventing any mouse interaction with the elements underneath. You could consider setting pointer-events: none on this element so that elements underneath can be interacted with by the mouse and thus show the hover styling:

tailwind.config = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    fontFamily: {
      sans: ['Josefin Sans', 'sans-serif'],
      alata: ['Alata'],
    },
    extend: {
      colors: {
        dark: '#1f2937',
        light: '#fS5572',
        contrast: '#772816',
        strongCyan: 'hsl(171, 66%, 44%)',
        lightBlue: 'hsl(233, 100%, 69%)',
        darkGrayishBlue: 'hsl(210, 10%, 33%)',
        grayishBlue: 'hsl(201, 11%, 66%)',
      },
    },
    spacing: {
      '9/20': '45%',
    }
  },
  plugins: [],
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.hero__hero-content {
  position: absolute;
}

.hero__hero-image {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  overflow: hidden;
  -o-object-position: center top;
  object-position: center top;
}

.hero__hero-image--hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background-color: rgba(119, 40, 22, 0.07);
  pointer-events: none;
}

.btn {
  background-color: #772816;
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.2rem;
  display: inline-block;
  border-radius: 5px;
}

.btn:hover {
  opacity: 0.7;
}

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<!-- Hero Section -->
<section id="hero">
  <div class="hero">
    <img src="https://i.stack.imgur.com/lqZMU.jpg" alt="man and womam holding each other" class="hero__hero-image w-3/5 left-9/20">
    <div class="hero__hero-content w-1/2 ml-4 top-1/3 transform -translate-y-1/2 text-center">
      <h1 class="font-semibold text-contrast">Healing Hearts, Restoring Intimacy</h1>
      <h2 class="pt-4 text-dark">Empowering Lives through Compassionate Counseling</h2>
      <p><a href="#" class="btn">Contact Us</a></p>
    </div>
    <div class="hero__hero-image--hero-overlay"></div>
  </div>
</section>
<p><a href="#" class="btn">Contact Us</a></p>