Блог

При наведении указателя мыши на элемент отображается его поле.Когда появляется поле, длина элемента увеличивается. Как я могу это показать, не увеличивая длину?

https://i.stack.imgur.com/97yZq.png

 <swiper-slide
      v-for="(n, index) in 18"
      :key="index"
      @mouseover="showByIndex = n"
      @mouseout="showByIndex = null"  
    >
    {{index}}
      <div class="relative h-34 w-full cursor-pointer">
        <img
          src="@/assets/images/posters/posters6.jpg"
          alt=""
          class="h-full w-full object-fill rounded-md"
        />
      </div>

      <div
        class="w-80 h-80 bg-ft-sd flex flex-col relative z-50 rounded-md border"
        v-if="showByIndex === n"
      >
        <div class="h-44 bg-gray-200">
          <!-- <video autoplay class="top-0 left-0 w-full h-full object-cover rounded-t-md">
    <source src="@/assets/videos/movie/m2.mp4" type="video/mp4" />
    Your browser does not support the video tag. I suggest you upgrade your
    browser.
  </video> -->
        </div>
        <div class="h-28 flex flex-col">
          <div class="h-1/2 px-2 py-2 flex flex-row space-x-2 items-center">
            <b-icon-play
              class="text-4xl border rounded-full text-white cursor-pointer p-2"
            ></b-icon-play>
            <b-icon-plus
              class="text-4xl border rounded-full text-white cursor-pointer p-2"
            ></b-icon-plus>
            <b-icon-hand-thumbs-up
              class="text-4xl border rounded-full text-white cursor-pointer p-2"
            ></b-icon-hand-thumbs-up>
            <b-icon-hand-thumbs-down
              class="text-4xl border rounded-full text-white cursor-pointer p-2"
            ></b-icon-hand-thumbs-down>
          </div>
          <div class="h-1/2 flex flex-col justify-between text-white">
            <div
              class="flex flex-row items-center space-x-2 text-sm py-1 px-2"
            >
              <span class="text-green-400">97% Match</span>
              <span class="border px-1">18 </span>
              <span>4 Season</span>
              <span class="text-lg"
                ><b-icon-badge-hd></b-icon-badge-hd
              ></span>
              <span>{{index}}</span>
            </div>
            <div
              class="flex flex-row items-center space-x-2 text-sm py-1 px-2 divide-x-8 divide-gray-600 divide-dotted"
            >
              <span>Memorization Distorts</span>
              <span class="pl-2">Emotional</span>
              <span class="pl-2">Youth</span>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
 

Я написал код вот так. Есть ли проблема с кодами или я что-то делаю не так?