Vuetify - 悬停卡展开：其他卡未调整大小答案

【问题标题】：Vuetify - Hover card to expand: Other cards are not resizingVuetify - 悬停卡展开：其他卡未调整大小
【发布时间】：2019-10-21 14:04:21
【问题描述】：

我正在使用 Vuetify 并在悬停时创建自定义可扩展卡片。当您将鼠标悬停在 v-card 上时，我正试图让其他人变小，但它不起作用。

我只使用 CSS，这是 Codepen：https://codepen.io/fabiozanchi/pen/BeewPP

这里是代码：

.custom-card-1,
.custom-card-2,
.custom-card-3,
.custom-card-4 {
  width: 23%;
  margin: 0 1%;
  position: relative;
  float: left;
  transition: 0.4s;
  height: 350px;
}

.custom-card-1:hover {
  width: 68%;
}

.custom-card-1:hover .custom-card-2,
.custom-card-1:hover .custom-card-3,
.custom-card-1:hover .custom-card-4 {
  width: 8%;
  transition: 0.4s;
}

.custom-card-1:hover .custom-card-2 .card-content,
.custom-card-1:hover .custom-card-3 .card-content,
.custom-card-1:hover .custom-card-4 .card-content {
  display: none;
}

<div id="app">
  <v-app id="inspire">
    <v-layout row wrap>
      <v-flex xs12>
        <v-card elevation-2 class="custom-card-1">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 1</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-2">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 2</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-3">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 3</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-4">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 4</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

知道如何使它仅适用于 CSS 吗？

由于百分比宽度，目前卡片将移至另一行。

【问题讨论】：

标签： css vuetify.js

【解决方案1】：

只需要对您的 CSS 代码进行少量更改。您的悬停选择器有点错误。它应该类似于.custom-card-1:hover ~ .custom-card-2，因为custom-card-1 和custom-card-2 都是兄弟元素。检查这个Demo：

【讨论】：

真的..！奇迹般有效。 Tks