在某些情况下遇到悬停无法与 postcss/tailwind 一起使用的问题

Question

上下文：我正在使用与 webpack 捆绑在一起的 postcss 和 tailwind。我正在尝试使用通用按钮模块（_btn.css 中的样式）在我正在构建的整个网站中使用。当我将按钮放在 div 中并在另一个模块 (_hero.css) 中定义类时，它会识别非悬停 btn 样式。但是，它不响应悬停伪类。

问题： 以下是我的 GitHub 存储库的链接：

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

该作品在英雄分支上。任何帮助将不胜感激。 html 代码位于 src/index.html 中。主要的 css 文件位于 src/styles/global/style.css 中。 2 个额外的支持 css 文件位于 src/styles/module/_hero.css 和 /_btn.css 中。

我尝试使用！重要，以防这是一个特异性问题。我尝试将相同的悬停样式放入 _hero.css 文件中。我咨询了 GPT，但它建议的一切我已经在做了。 如果我在 div 之外使用 btn 类（样式在 _hero.css 中定义），则效果很好。

悬停样式是改变背景按钮的不透明度。第二个 btn 实例按预期工作。

Answer 1

.hero__hero-image--hero-overlay

元素与所有元素重叠，防止鼠标与下面的元素交互。您可以考虑在此元素上设置

pointer-events: none

，以便可以通过鼠标与下面的元素进行交互，从而显示悬停样式：

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>