Блог

В моей настольной версии у меня есть некоторый код, который позволяет вам навести курсор на кнопку, чтобы отобразить некоторую информацию / текст. Как мне сбросить это на мобильном устройстве, чтобы вообще ничего не делать при нажатии.

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

Попробуйте выполнить этот медиа-запрос

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