Question

我正在使用Vuetify并在悬停时创建自定义可扩展卡。当您将鼠标悬停在v卡上时，我正在尝试缩小其他按钮，但它不起作用。

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

这里是代码：

HTML

<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

.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;
}

有什么主意如何使其仅适用于CSS？

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

Answer 1

只需在CSS代码中进行少许更改。您的悬停选择器有点错误。它应该像.custom-card-1:hover ~ .custom-card-2，因为custom-card-1和custom-card-2都是同级元素。选中此Demo：

Vuetify-悬停卡片可扩展：其他卡片未调整大小

1 个答案: