CODEWITHSUNDEEP
htmlcss
OAx
OAx

Reputation: 11

Changing :hover to :active for mobile touch devices

I want to use the :hover effect on desktop (which is working pretty fine) and switch to :active for mobile devices.

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

Upvotes: 0

Views: 128

Answers (1)

user2342558
user2342558

Reputation: 6693

You can differentiate a CSS rule with the @media construct:

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

Adjust @media max-width and min-width as your needs.

Upvotes: 3

Related Questions