虚拟-哈弗卡扩展:其他卡没有调整大小

Question

我正在使用Vuetify并在悬停时创建自定义可扩展卡。当你在v卡上盘旋时，我试图让其他人变小，但它不起作用。

我只使用CSS，以下是代码库：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都是同级元素。检查这个演示