css - Vuetify - 悬停卡扩展 : Other cards are not resizing

Question

我正在使用 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 一起工作吗？

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

Answer 1

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