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

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>

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

1 个答案: