Question

我有多个轮播格式的翻转卡，因此每次将鼠标悬停在我命名为event1，event2和event3的卡上以区分每个事件时，它将翻转下面的代码，但我想节省css文件中的空间。这是我正在尝试构建的代码

.event1:hover .flip-card-inner {
   transform: rotateY(180deg);
}

.event2:hover .flip-card-inner {
   transform: rotateY(180deg);
 }

 .event3:hover .flip-card-inner {
   transform: rotateY(180deg);
 }

我试图做这些

.event1:hover, .event2:hover, .event2:hover, .flip-card-inner {
   transform: rotateY(180deg);
}

但是它以尴尬的方式翻转，这是我添加的每张事件卡的html

 <div class="item">
     <div class="flip-card event3">
        <div class="flip-card-inner">
            <div class="flip-card-front">   
                <div class="card__img card__img--airshow"> </div>   
                    <span class="information">
                        <p class="card__text"> Event Title  </p>
                    </span>
                    <p class="card__btn ctabtn">JOIN US</p>
                </div>

        <div class="flip-card-back">
          <div class="card__img card__img--airshowback"> </div>
               <p>Location</p>
               <p></p>
          <div class="hosted-cities">
             <a type="button" class="card__btn" href="" target="_blank" class="button">CHECK DETAILS</a>


           </div>
         </div> 
        </div>
      </div>
  </div>

Answer 1

这是不正确的CSS语法

.event1:hover, .event2:hover, .event2:hover, .flip-card-inner {
      transform: rotateY(180deg);
}

您应将其更改为以下正确的语法：

.event1:hover .flip-card-inner, .event2:hover .flip-card-inner, .event2:hover .flip-card-inner {
     transform: rotateY(180deg);
 }

在SCSS中，您甚至可以将其写为

.event1:hover, .event2:hover, .event2:hover {
   & .flip-card-inner {
     transform: rotateY(180deg);
   }
}

最好的方法是提供一个像event这样的通用类，这样您的CSS代码就会变得更短：

.event .flip-card-inner {
   transform: rotateY(180deg);
}

Answer 2

只需在第二个event2:hover之后删除逗号

.event1:hover, .event2:hover, .event2:hover .flip-card-inner {
  transform: rotateY(180deg);
}

节省翻页卡悬停中多个类别的空间

2 个答案: