使用flexbox(tailwindcss:flex-1)如何為整個元素添加背景顏色而不僅僅是文本？

尋求有關我的標簽設計的幫助。我使用了一個由兩部分組成的 flexbox。頂部為主要內容，底部為“標簽”按鈕，可根據所選標簽更改主要內容資料。

我希望能夠將滑鼠懸停在按鈕上，并且希望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>

uj5u.com熱心網友回復：

由于您使用的是 a flexbox，因此您需要進行一些細微的調整才能使其正常作業，其中每個div（我們稱之為 div-1）都包含一個進一步包含span元素的子 div ，我們可以將 div-1 轉換為具有方向的 flexbox設定為一列，并進一步應用flex-grow，它占據了母公司的全高度，div連同flex-1已經存在，這是因為這種div駐留下div，其flex-direction被指定為row。flex-grow當flex-direction為時，在 y 軸上增長column。子 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>

標籤：css Vue.js 弹性盒 顺风-css

上一篇：我的背景影像屬性沒有正確連接

下一篇：Vuetify：更改<v-overlay>主題時發出警告