在点击而不是悬停时实现翻转卡答案

【问题标题】：implementing flipcard on click instead of on hover在点击而不是悬停时实现翻转卡
【发布时间】：2016-07-08 16:19:42
【问题描述】：

我已经实现了一个 css 翻牌效果，它适用于使用 css 的悬停。请参阅下面的 css 代码。但是我想通过使用 jQuery 来实现点击时的翻转卡效果。我已经尝试了所有方法，但无法弄清楚。

这是我认为可行的 javascript。

$('.flip-container .flipper').click(function(){
    $(this).css('transform, rotateY(180deg)');
});

请参见下面的悬停代码。

html

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

css

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}


.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover; 
}

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

要完成这项工作，您需要删除 CSS 中 .flip-container 元素上的 :hover 规则：

/* .flip-container:hover .flipper, */
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

然后在您的 JS 中，您需要在单击元素时切换 hover 类：

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

Working example

请注意，现在也可能值得将类名从hover 更改为，否则当您以后维护代码时可能会感到困惑

【讨论】：

【解决方案2】：

您需要做的是将您的 css 从在 :hover 伪元素上触发更改为您需要通过 jquery 切换的类。

css

/* flip the pane when clicked */
 .flip-container .flipper.flip {
  transform: rotateY(180deg);
}

$('.flip-container .flipper').click(function(){
    $(this).toggleClass("flip");
});

这是一个有效的Fiddle

【讨论】：