按钮的点击/移动解决方案显示与“悬停”的链接

Question

我有一组按钮，它们在悬停时翻转以显示链接。我想我也可以修改它们以在触摸设备上工作，但我正在努力。理想情况下，我希望移动/触摸用户能够点击按钮并显示链接（第一次点击模拟“悬停”功能） - 我已经尝试了几个小时但我似乎没有得到任何地方——有没有更简单的方法来做到这一点并获得我想要的行为？

我当前的代码如下：

https://codepen.io/UnluckyForSome/pen/bGmLGWg

HTML：

            <article class="panel" id="findme">
              <header>
                <h2>Find Me!</h2>
              </header>
              <p>Find me anywhere!</p>
              <div class="cube flip-to-top">
                <div class="default-state github">
                  <i class="icon brands fa-github"></i> GitHub
                </div>
                <div class="active-state">
                  <a href="https://example.com/unluckyforsome">@Example</a>
                </div>
              </div>
              <div class="cube flip-to-top">
                <div class="default-state linkedin"">
                  <i class=" icon brands fa-linkedin"></i> LinkedIn </div>
                <div class="active-state">
                  <a href="https://example.com/unluckyforsome">@Example</a>
                </div>
              </div>
              <div class="cube flip-to-top">
                <div class="default-state twitter">
                  <i class="icon brands fa-twitter"></i> Twitter
                </div>
                <div class="active-state">
                  <a href="https://example.com/unluckyforsome">@Example</a>
                </div>
              </div>
              <div class="cube flip-to-top">
                <div class="default-state instagram">
                  <i class="icon brands fa-instagram"></i> Instagram
                </div>
                <div class="active-state">
                  <a href="https://example.com/unluckyforsome">@Example</a>
                </div>
              </div>
              <div class="cube flip-to-top">
                <div class="default-state facebook">
                  <i class="icon brands fa-facebook"></i> Facebook
                </div>
                <div class="active-state">
                  <a href="https://example.com/unluckyforsome">@Example</a>
                </div>
              </div>
            </article>

CSS：

  .cube {
    width: 100%;
    height: 50px;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .default-state,.active-state {
    height: 50px;
  }
  .cube +.cube:not(:last-child){
  margin:10px 0px;
  }

  .default-state {
    -webkit-transform: translateZ(25px);
    -moz-transform: translateZ(25px);
    -o-transform: translateZ(25px);
    -ms-transform: translateZ(25px);
    transform: translateZ(25px);
  }
  .flip-to-top .active-state {
    -webkit-transform: rotateX(90deg) translateZ(75px);
    -moz-transform: rotateX(90deg) translateZ(75px);
    -o-transform: rotateX(90deg) translateZ(75px);
    -ms-transform: rotateX(90deg) translateZ(75px);
    transform: rotateX(90deg) translateZ(75px);
  }
  .flip-to-bottom .active-state {
    -webkit-transform: rotateX(-90deg) translateZ(-50px);
    -moz-transform: rotateX(-90deg) translateZ(-50px);
    -o-transform: rotateX(-90deg) translateZ(-50px);
    -ms-transform: rotateX(-90deg) translateZ(-50px);
    transform: rotateX(-90deg) translateZ(-50px);
  }
  .cube.flip-to-top:hover {
    -webkit-transform: rotateX(-89deg);
    -moz-transform: rotateX(-89deg);
    -o-transform: rotateX(-89deg);
    -ms-transform: rotateX(-89deg);
    transform: rotateX(-89deg);
  }
  .cube.flip-to-bottom:hover {
    -webkit-transform: rotateX(89deg);
    -moz-transform: rotateX(89deg);
    -o-transform: rotateX(89deg);
    -ms-transform: rotateX(89deg);
    transform: rotateX(89deg);
  }
  .cube {
    margin: 0 auto;
  }
  .default-state {
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: background 250ms ease;
    -moz-transition: background 250ms ease;
    -o-transition: background 250ms ease;
    transition: background 250ms ease;
    background-color: #222222;
    transition: background-color .25s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.active-state {
    white-space: nowrap;
    background-color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active-state a {
    font-weight: bold;
    text-decoration: underline;
    color: deepskyblue;
}



  .linkedin {
    background: #0077b5;
  }
  .github {
    background: #171515;
  }
  .facebook {
    background: #3B5998;
  }
  .twitter {
    background: #1DA1F2;
  }
  .instagram {
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  }

  .default-state i {
    margin-right: 10px
  }

提前致谢！ :D

我已经尝试了一些 javascript 解决方案，但我无法让它们正常运行。一个解决方案我能够第一次点击显示链接，但这破坏了正常的浏览器悬停功能。

Answer 1

好吧，您可以尝试的一种解决方案是在触摸设备上点击按钮时使用一些 JavaScript 来切换按钮上的类。

您可以为 touchstart 事件的按钮添加一个事件侦听器，然后使用它向按钮添加一个类，触发与悬停效果相同的动画。然后，当用户再次点击按钮时，您可以删除该类以将其返回到默认状态。

这里有一些示例代码可以帮助您入门：

var flipButtons = document.querySelectorAll('.flip-to-top');

flipButtons.forEach(function(button) {
  button.addEventListener('touchstart', function() {
    if (button.classList.contains('hover-state')) {
      button.classList.remove('hover-state');
    } else {
      button.classList.add('hover-state');
    }
  });
});

在这段代码中，我们选择所有带有 flip-to-top 类的按钮，为每个按钮添加一个触摸启动事件侦听器，然后在点击按钮时打开和关闭悬停状态类。

您还需要添加一些 CSS 来定义悬停状态类并指定要使用的动画。

希望对您有所帮助