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

Question

在我的桌面版本中，我有一些代码允许您将鼠标悬停在按钮上以显示一些信息/文本。我如何在移动设备中重置它以在点击时完全不做任何事情。.credit:hover .credit-text,  .credit-ba:hover .credit-text {     display: block;  }相反，我想在图标上写一个 JS 规则以使其可点击 - 所以在点击图标时切换隐藏和显示。悬停点击手机的问题在于，用户必须在屏幕周围点击以关闭打开的选项卡，而不是再次点击按钮/图标。.hideElement {         display: none;      }这是JSconst 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,

  .credit-ba:hover .credit-text {

     display: block;

  }

 }

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')

   })

@media not all and (pointer: coarse) {

.credit:hover .credit-text,

  .credit-ba:hover .credit-text {

     display: block;

  }

 }

  

  .hideElement {

         display: none;

      }

<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>

                     Models

                     <br>Jina Yoo

                     <br>Aaron Wong

                     <br>Reign Charbit

                     <br>Karen Reichelt

                     <br>Harrison Chan

                     <br>Jessica Chen

                     <br>Kristianna Peel

                     <br>Trinity Mcintosh

                     <br><br>

                     Special thanks to Lane Crawford

                     <br>

                     and the MAFCSM team</p>

               </div>

            </div>