使用 flexbox (tailwindcss: flex-1) 如何为整个元素添加背景颜色而不仅仅是文本？

Question

正在为我的标签设计寻求帮助。我使用一个有两个部分的 flexbox。顶部是主要内容，底部是 'tab' 按钮，这些按钮将根据所选选项卡更改主要内容数据。

我希望能够将鼠标悬停在按钮上，并且我希望包含此元素的整个 div 突出显示（不同的背景颜色），并且在选择时以不同的颜色永久突出显示。

目前，当我悬停时，只有 div 内的文本会突出显示并指定边距。如何让整个div改变背景颜色？

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex w-full text-sm text-center items-center bg-blue-500">
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Tab 1</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

由于您使用的是 flexbox，因此您需要进行一些小的调整才能使其正常工作，其中每个 div（我们称之为 div-1）都有一个子- div 进一步包含 span 元素，我们可以将 div-1 转换为方向设置为列的 flexbox 并进一步应用 flex-grow 以便它占据父级 div 的完整高度，以及已经存在的 flex-1，这是因为此 div 位于 div 之下，其 flex-direction 被指定为当 flex-direction 为 column 时，row .flex-grow 在 y 轴上增长。 sub-div 再次需要具有属性 align-items:center、justify-content:center 和 flex-grow:1，以便其中的文本居中，并且此 div占据其父项的全高 div（div1 根据我们的示例）。

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex text-sm text-center bg-blue-500">
      <div class="flex -1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span>Tab 1</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>

使用 flexbox (tailwindcss: flex-1) 如何为整个元素添加背景颜色而不仅仅是文本？

Using flexbox (tailwindcss: flex-1) how do I add background colour to WHOLE element not just the text?

css

flexbox

vue.js

tailwind-css