Tailwind CSS 组悬停 - 嵌套层上的不同不透明度不起作用

Question

当我试图让不同的图层淡化不同的不透明度时，我遇到了一个问题。 我有卡片元素（在下面的代码中），我想保持背景不透明度为 50，并使 hover 上的文本不透明度为 100。

现在，将鼠标悬停在卡片上时，一切都保持在不透明度 50，我无法将文本更改为不透明度 100。 我尝试将卡片标题不透明度设置为 100，但父容器似乎覆盖了子容器的不透明度。

关于如何解决这个问题的任何建议？

    import React from "react";
    import greenBlock from "../assets/images/homeLayout/heroPhotos/1.jpg";
    import yellowBlock from "../assets/images/homeLayout/heroPhotos/2.jpg";
    import redBlock from "../assets/images/homeLayout/heroPhotos/8.jpg";
    
    const HomeHero = () => {
      return (
        <>
          <div className="grid w-full h-screen grid-cols-1 lg:grid-cols-3">
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${greenBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div class="card w-96 bg-neutral text-neutral-content opacity-50">
                    <div class="card-body items-center text-center opacity-100">
                      <h2 class="card-title opacity-100">Title!</h2>
                      <p>We are using cookies for no reason.</p>
                      <div class="justify-end card-actions">
                        <button class="btn btn-primary">Accept</button>
                        <button class="btn btn-ghost">Deny</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${yellowBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div className="block max-w-sm text-center bg-white rounded-lg shadow-lg ">
                    <div className="px-6 py-3 border border-gray-300 rounded-lg">
                      <div class="p-6">
                        <h5 class="text-gray-900 text-xl font-medium mb-2">
                          Special title treatment
                        </h5>
                        <p class="text-gray-700 text-base mb-4">
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                        >
                          Button
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${redBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div className="block max-w-sm text-center bg-white rounded-lg shadow-lg ">
                    <div className="px-6 py-3 border border-gray-300 rounded-lg">
                      <div class="p-6">
                        <h5 class="text-gray-900 text-xl font-medium mb-2">
                          Special title treatment
                        </h5>
                        <p class="text-gray-700 text-base mb-4">
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                        >
                          Button
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    };
    
    export default HomeHero;

Answer 1

在 CSS 中，更改父元素的不透明度将对所有子元素执行相同的操作。 你想改变背景颜色的不透明度（或类似的东西）。

TailwindCSS 文档链接

Answer 2

不透明度从父元素继承到子元素，但幸运的是有几种方法可以解决这个问题。 许多这些方法都在这个类似问题的答案中。

1. 如果是颜色，那么最好的办法就是用RGBA来定义颜色，其中最后一个alpha通道就是不透明度。 这不会级联。

2. 如果是图片，这个对上述问题的回答声称可以解决问题（虽然我从未尝试过）

3. 如果它是文本或其他任何内容，我倾向于 go 使用将子元素更改为兄弟元素并设置其 position 的解决方案，以便它位于正确的位置。