Question

我已经实现了翻转卡。它有一个按钮。一切正常但不是按钮。如果我从整个事物中移除了CSS，按钮可以正常工作，但显然我失去了效果并翻转。我甚至尝试在整个图像上放置链接，但链接仍无效。看起来有些东西阻止了整个事情的联系。我做错了什么？

github

HTML

    <style type="text/css">
        .flip-card {
  -webkit-perspective: 1000;
          perspective: 1000;
  border: 0;
  background: transparent;
}

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

.flip-card,
.flip-card-inner-front,
.flip-card-inner-back {
  width: 100%;
  height: 8rem;
}

.flip-card-inner {
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.flip-card-inner-front,
.flip-card-inner-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.flip-card-inner-front {
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flip-card-inner-front span {
  width: 100%;
  text-align: center;
  background: rgba(254, 254, 254, 0.8);
  padding: 0.25rem 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.flip-card-inner-back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  background: #cacaca;
  padding: 1rem;
}

.flip-card-inner-back-title {
  font-weight: bold;
}

.flip-card-inner-back-text {
  line-height: 1.3;
}
    </style>

翻转卡按钮不起作用

0 个答案: