鼠标经过卡片，卡片内的按钮变色

Question

我的

原图

代码

 <el-col>
        <el-card shadow="always" v-for="(item,index) in care" :key="index" class="car2">
            <li class="zt1">{{item.a}}</li>
            <li class="zt2">{{item.b}}</li>
            <li class="zt2">{{item.c}}</li>
            <button class="bt">{{item.d}}</button>
        </el-card>
      </el-col>


.car2{
    height: 240px;
    width: 348px;
    margin-left: 70px;
     float: left;
     background-color: #f7f7f7;
     margin-bottom: 50px;

} 
.car2:hover{
  background-color: #eb7d51;
  color: #fff;
}

Answer 1

可以再多看看css的文档~
代码可以这样写
我们使用父子选择器并根据奇数偶数的选择器来编写css

.car2:nth-child(odd):hover .bt{
  这里写经过第奇数个car2时，car2内的bt的状态
}

.car2:nth-child(even):hover .bt{
  这里写经过第偶数个car2时，car2内的bt的状态
}

如有帮助请采纳回答~谢谢