覆盖移动设备的桌面悬停样式

Question

在我的桌面版本中，我有一些代码允许您将鼠标悬停在按钮上以显示一些信息/文本。我如何在移动设备中重置它以在点击时完全不做任何事情。

.credit:hover .credit-text,

  .credit-ba:hover .credit-text {

     display: block;

  }

相反，我想在图标上写一个 JS 规则以使其可点击 - 所以在点击图标时切换隐藏和显示。悬停点击手机的问题在于，用户必须在屏幕周围点击以关闭打开的选项卡，而不是再次点击按钮/图标。

.hideElement {

         display: none;

      }

这是JS

const creditIcon = document.querySelector('.credit-icon');

const creditText = document.querySelector('.credit-text');

let creditOpen = false;

   creditIcon.addEventListener('click', () => {

      creditText.style.display = "block";

      creditOpen = processMenu.classList.contains('hideElement')

   })

HTML

<div class="credit black-text">

               <button class="credit-icon"> (...)

               </button>

               <div class="credit-text hideElement">

                  <p>

                     Thank you

                     to my team of helpers

                     <br><br>

                     and the following

                     <br><br>

                     Collaborators<br>

                     Handmade Staples Details produced by Mary Chan

                     <br>Knitwear produced by Elaine Lip

                     <br>Shoes Handcrafted by Doyeon Ji

                     <br>Soundtrack composed by Zacharias Wolfe

                     <br><br>

                     Look Book

                     <br>Photographed by Dean Hoy

                     <br>Make Up by Ana Takahashi

                     <br><br>

                     Show

                     <br>Hair by L’Oréal Professionnel

                     <br>Make Up by MAC Cosmetics

                     Supported by ThreeUK

                     <br><br>

Answer 1

试试这个媒体查询@media not all and (pointer: coarse) {.credit:hover .credit-text,&nbsp; .credit-ba:hover .credit-text {&nbsp; &nbsp; &nbsp;display: block;&nbsp; }&nbsp;}const creditIcon = document.querySelector('.credit-icon');const creditText = document.querySelector('.credit-text');let creditOpen = false;&nbsp; &nbsp;creditIcon.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; creditText.style.display = "block";&nbsp; &nbsp; &nbsp; creditOpen = processMenu.classList.contains('hideElement')&nbsp; &nbsp;})@media not all and (pointer: coarse) {.credit:hover .credit-text,&nbsp; .credit-ba:hover .credit-text {&nbsp; &nbsp; &nbsp;display: block;&nbsp; }&nbsp;}&nbsp;&nbsp;&nbsp; .hideElement {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: none;&nbsp; &nbsp; &nbsp; }<div class="credit black-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button class="credit-icon"> (...)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="credit-text hideElement">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Thank you&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;to my team of helpers&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;and the following&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Collaborators<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Handmade Staples Details produced by Mary Chan&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Knitwear produced by Elaine Lip&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Shoes Handcrafted by Doyeon Ji&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Soundtrack composed by Zacharias Wolfe&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Look Book&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Photographed by Dean Hoy&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Make Up by Ana Takahashi&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Show&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Hair by L’Oréal Professionnel&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Make Up by MAC Cosmetics&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Supported by ThreeUK&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Models&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Jina Yoo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Aaron Wong&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Reign Charbit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Karen Reichelt&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Harrison Chan&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Jessica Chen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Kristianna Peel&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>Trinity Mcintosh&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Special thanks to Lane Crawford&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;and the MAFCSM team</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>