亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

覆蓋移動設備的桌面懸停樣式

覆蓋移動設備的桌面懸停樣式

PIPIONE 2023-03-10 15:49:51
在我的桌面版本中,我有一些代碼允許您將鼠標懸停在按鈕上以顯示一些信息/文本。我如何在移動設備中重置它以在點擊時完全不做任何事情。.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>
查看完整描述

1 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

試試這個媒體查詢


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


查看完整回答
反對 回復 2023-03-10
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號