Question

我正在创建一些有助于在悬停时翻转div的东西。我已经创建了。但是问题在于移动分辨率，翻转应该发生在点击时，而不是悬停时。这意味着，当我们按下一张卡时，该卡应翻转，并且仅当再次单击时，它才应翻转到其默认面。当我们单击另一张卡时，不会。

我在下面添加了代码。请仔细阅读以获取更多说明。

.nb-flip-container:hover .nb-flip-grid, .nb-flip-container.hover .nb-flip-grid {
  transform: rotateY(180deg);
}

        
.nb-flip-container {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 30px;
  perspective: 1000px;
  cursor: default;
}
    
.nb-flip-grid {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;
}

.nb-flip-back {
  background: #fff200;
  padding:5px;
  border-radius:8px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);

}
    
.nb-flip-back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}

span {
  display: block;
  font-size: 10px;
  font-weight: $tertiary-weight;
  margin-bottom: 5px;
}

p {
  margin-bottom: 5px;
  line-height: 18px;
}

h3 {
  margin-bottom: 0;
}

<div class="nb-flip-container">
  <div class="nb-flip-grid">
     <div class="nb-flip-front">
        <img alt="" src="http://dev.netbramha.in/projects/flip-image/flip-image-21.png">
     </div>
     <div class="nb-flip-back">
        <span> User Interface </span>
        <p> This is where the design becomes </p>
        <h3> SEXY. </h3>
     </div>
  </div>
</div>

Answer 1

这是你的幸福吗？

<!-- -->

Sample Link

Answer 2

请记住，有很多方法可以解决此问题，而我的方法就是其中之一。根据您的标题，解决方案允许使用jQuery。

首先，我们大多数检测到我们是在移动环境或台式机上（也有很多方法可以做到这一点），我们使用的是旧解决方案。

用于检测我们运行环境的JS代码：

 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    $('body').addClass('mobile');
    //if you have one element
    $('.nb-flip-container').toggleClass('clicked');
    //if you have multiple elements to preventing all elements be flipped
    $('.nb-flip-container').on('click', function(){//or on touch
        $(this).toggleClass('clicked');
    });
  }
 else {
    $('body').addClass('not-mobile');
  }

CSS：

.not-mobile .nb-flip-container:hover .nb-flip-grid,
            .nb-flip-container.hover .nb-flip-grid {
  transform: rotateY(180deg);
}

.mobile .nb-flip-container.clicked .nb-flip-grid,
        .nb-flip-container.clicked .nb-flip-grid {
  transform: rotateY(180deg);
}

说明：在js代码中，我们检测到我们的环境是否可移动。如果是移动设备，请在正文中添加新类，并在元素中添加新功能以检测点击（或更好的解决方案触摸）事件。发生触摸时，向元素添加一个新类，该类等于桌面模式下的悬停效果。

jQuery-翻转DIV问题

2 个答案: