html - 改变 :hover to :active for mobile touch devices

Question

我想在桌面上使用 :hover 效果(工作得很好)并切换到移动设备上的 :active。

.dropdown:hover,
.dropdown:active .dropdown-content {
  display: block;
  right: 20px;
}

<div class="dropdown">
  <div class="dropdown-content">
    <p id="dropdown-element">Dashboard öffnen</p>
    <p id="dropdown-element">Beratung beenden</p>
  </div>
</div>

Answer 1

您可以使用 @media 构造来区分 CSS 规则:

<style>
/* for all types */
.dropdown-content {
    ...
}
/* for desktop (also old ones) */
@media (min-width : 641px)
{
    .dropdown:hover {
        ...
    }
}
/* for smartphones */
@media (max-width : 640px)
{
    .dropdown:active {
        ...
    }
}
</style>
<div class="dropdown">
   <div class="dropdown-content">
      <p id="dropdown-element">Dashboard öffnen</p>
      <p id="dropdown-element">Beratung beenden</p>
   </div>
</div>

根据需要调整@media max-width 和min-width。