在我的桌面版本中,我有一些代码允许您将鼠标悬停在按钮上以显示一些信息/文本。我如何在移动设备中重置它以在点击时完全不做任何事情。
.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>
海绵宝宝撒
相关分类