Question

我已经实现了一个css flipcard效果，它可以在使用css进行悬停时使用。请参阅下面的css代码。但是我想通过使用jQuery实现click上的flipcard效果。我已经尝试了一切，但无法弄明白。

以下是我认为可行的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; 
}

Answer 1

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

/* .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的类名，否则当您以后维护代码时可能会感到困惑

Answer 2

what you need to do is to change your css from being triggered on :hover pseudo element to a class which you need to toggle via jquery.

css

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

JS

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

here is a working Fiddle

中输入输入类型文字

在点击时实施flipcard而不是悬停

2 个答案: