对于移动触摸设备，将 :悬停更改为 :活动

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>

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