css - 将鼠标悬停在整个正面卡片上，而不仅仅是按钮上

Question

当鼠标悬停在整个正面卡片上而不仅仅是按钮上时，如何使卡片变形，我尝试在前面的 div 上添加 ID 和类，但卡片只是自动变形。 https://jsfiddle.net/ecbumaw9/

.more {
display: none;
}
.more:checked ~ .content {
transform: rotateY(180deg);
}

Answer 1

将 :hover 添加到 .card 类并引用子项。它应该有效。

按如下方式修改您的 CSS:

.more:checked ~ .content, .card:hover  .content {
  transform: rotateY(180deg);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card {
  width: 320px;
  height: 240px;
  margin: 1em;
  /*perspective: 1500px;*/
}

.card .content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

.more {
  display: none;
}

.more:checked~.content,
.card:hover .content {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 6px;
}

.front .inner,
.back .inner {
  height: 100%;
  display: grid;
  padding: 1.3em;
  transform: translateZ(80px) scale(0.94);
}

.back .inner {
  padding: 1em !important;
  background-color: #fff;
}

.front {
  background-color: #fff;
  background-size: cover;
  background-position: center center;
}

.front:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  backface-visibility: hidden;
  background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}

.front .inner {
  grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
  justify-items: center;
}

.front h2 {
  grid-row: 2;
  margin-bottom: 0.3em;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #151515;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.front .rating {
  grid-row: 3;
  color: #ffe234;
  font-size: 14px;
  display: flex;
  flex-flow: row nowrap;
}

.front .rating i {
  margin: 0 1px;
}

.back {
  transform: rotateY(180deg);
  background-color: #fff;
  border: 2px solid #a1e8b9;
}

.back .inner {
  grid-template-rows: 1fr 1fr 1fr 1fr 14fr 1fr 1fr;
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 0.8em;
  justify-items: inherit;
}

.back .info {
  position: relative;
  display: flex;
  align-items: center;
  color: #696969;
  grid-row: 3;
}

.back .info:not(:first-of-type):before {
  /*content: '';*/
  position: absolute;
  left: -0.9em;
  height: 18px;
  width: 1px;
  background-color: #ccc;
}

.back .info span {
  font-size: 1em;
  font-weight: 700;
}

.back .info i {
  font-size: 1.2em;
}

.back .info i:before {
  background: linear-gradient(40deg, #355cc9, #438af3);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.back .info .icon {
  margin-left: 0.3em;
}

.back .info .icon span {
  display: block;
  margin-top: -0.25em;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}

.back .description {
  grid-row: 5;
  grid-column: 1/-1;
  font-size: 0.70em;
  border-radius: 5px;
  font-weight: 600;
  line-height: 1em;
  overflow: auto;
  color: #000;
  padding-right: 10px;
  position: relative;
}

.back .description ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: left;
}

.back .description li {
  padding: 6px;
}

.back .description span {
  margin-right: 10px;
}

.back .description p {
  padding: 10px 5px;
}

.draw-border {
  box-shadow: inset 0 0 0 2px #a1e8b9;
  transition: color 0.25s 0.0833333333s;
  position: relative;
  width: 100%;
}

.draw-border::before,
.draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.draw-border::after {
  border-top-width: 2px;
  border-right-width: 2px;
}

.draw-border:hover {
  color: #696969;
}

.draw-border:hover::before,
.draw-border:hover::after {
  border-color: #696969;
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.05rem;
  margin: 5px;
}

.btn:focus {
  outline: 2px dotted #55d7dc;
}

.back .location,
.back .price {
  font-weight: 600;
  color: #696969;
  grid-row: 1;
  font-size: 0.86em;
}

.back .location {
  grid-column: 1/3;
  justify-self: left;
}

.back .price {
  grid-column: 3/-1;
  justify-self: right;
}

.back .button {
  grid-column: 1/-1;
  justify-self: center;
}

.button {
  grid-row: -1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  padding: 0 1.5em;
  height: 3em;
  line-height: 2.9em;
  min-width: 3em;
  background-color: transparent;
  border: solid 2px #fff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  left: 50%;
  backface-visibility: hidden;
  transition: 0.3s ease-in-out;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.button:hover {
  background-color: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  color: #696969;
}

.button.return {
  line-height: 1.7em;
  color: #696969;
  border-color: #696969;
  text-shadow: none;
  height: 2em !important;
}

.button.return:hover {
  background-color: #696969;
  color: #fff;
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #707070;
}

::-webkit-scrollbar-thumb:hover {
  background: #355cc9;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .back {
    transform: rotateY(180deg);
    background-color: #fff;
    border: 5px solid #a1e8b9;
  }
  .card {
    width: 820px !important;
    height: 440px !important;
    margin: 1em !important;
  }
  .back .description {
    font-size: 16px;
  }
  .back .description li {
    margin: 10px;
    font-weight: 400;
    padding: 16px;
  }
  .back .info span {
    font-size: 1.8em;
    font-weight: 700;
  }
  .back .location,
  .back .price {
    font-size: 1.5em;
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  .draw-border {
    width: 99%;
  }
  .draw-border:hover {
    color: #696969;
  }
  /* Styles */
}

<div class="wrapper">
  <div class="card">
    <input type="checkbox" id="card1" class="more" aria-hidden="true">
    <div class="content">
      <div class="front" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Chicago_Skyline_%2815240030464%29.jpg/800px-Chicago_Skyline_%2815240030464%29.jpg')">
        <div class="inner">
          <h2>Chicago Events For A Year Ahead</h2>
          <div class="rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
          <label for="card1" class="button" aria-hidden="true">
                           Check Events
                        </label>
        </div>
      </div>
      <div class="back">
        <div class="inner">
          <div class="info">
            <!-- <i class="fa fa-calendar"></i> -->
            <span>Month</span>
            <div class="icon">


            </div>
          </div>
          <div class="info">
            <span>Event Type</span>
            <div class="icon">
              <!-- <i class="fa fa-door-open"></i> -->

            </div>
          </div>
          <div class="info">
            <!--  <span>Event</span> -->
            <div class="icon">
              <!--  <i class="fa fa-bed"></i>
                                 -->
            </div>
          </div>

          <div class="description">
            <ul>
              <li class="btn draw-border"> <span>Sep</span> Fall Whiskey </li>
              <li class="btn draw-border"> <span>Oct</span> Halloween Bar Crawl Fri & Sat </li>
              <li class="btn draw-border"> <span>Dec</span> NYE Bar Crawl </li>
              <li class="btn draw-border"> <span>Dec</span> NYE Yacht </li>
              <li class="btn draw-border"> <span>Jan</span> Winter Whiskey </li>
              <li class="btn draw-border"> <span>Feb</span> Winter Tequila </li>
              <li class="btn draw-border"> <span>Mar</span> St Patrick's Bar Crawl </li>
              <li class="btn draw-border"> <span>Jun</span> Summer Whiskey </li>
              <li class="btn draw-border"> <span>Jul</span> Summer Tequila </li>
              <li class="btn draw-border"> <span>Aug</span> Air Show Yacht Party </li>
            </ul>

          </div>
          <div class="location">Chicago Events </div>
          <div class="price">2019-2020</div>
          <label for="card1" class="button return" aria-hidden="true">
                            <i class="fa fa-arrow-left"></i>
                        </label>
        </div>
      </div>
    </div>
  </div>

JsFiddle link