Replace hover effect by active and focus

Chris · Aug 23, 2024

Hi Coding Forums,

I was wondering how you deal with hover effect on smartphone? You have to tap and maintain your finger on the screen to have an hover effect but I assume most users will just tap it briefly, so I use the code bellow but it does not work. So how would solve this? What is your approach for responsive design?

@media (max-width: 768px) {
.container {
padding: 20px;
}
.intro .button:focus,
.intro .button:active {
background-color: white;
color: dimgrey;
}
.intro {
padding: 30px;
}
.intro h1 {
font-size: 1.5em;
}
.intro p {
font-size: 1.45em;
}
.intro .button {
font-size: 0.9em;
padding: 15px 20px;
margin-top: 10px;
}
@keyframes pulse {
to {
box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
}
}
footer {
font-size: 0.90rem;
}
}
.intro .button:focus,
.intro .button:active {
background-color: white;
color: dimgrey;
}

VBService comes to my help!

VBService · Friday at 7:03 PM

Have you tried writing the code some like this?
To test run this code on a touchscreen device.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Effect: Hover over touch screen</title>
    <style>
      .button {
        padding: 10px 20px;
        background-color: lightblue;
        border: 1px solid #000;
        text-align: center;
        transition: background-color .15s;
        user-select: none;
      }
      .button:hover,
      .button:active,
      .hovered {
        background-color: deepskyblue;
      }
      .space50 {
        background-color: wheat;
        height: 50vh;       
      }
      .space300 {
        background-color: wheat;
        height: 300vh;
      }

    </style>
  </head>
  <body>
    <p class="space50"></p>
    <div class="button">Click or touch me</div>
    <p class="space300"></p>

    <script>
      const button = document.querySelector('.button');

      button.addEventListener('touchstart', function() {
        this.classList.add('hovered');
        setTimeout(() => { button.classList.remove('hovered'); }, 150);
      });   
    </script>

  </body>
</html>

Snowing Effect	2	Apr 24, 2023
Image on header	2	May 2, 2024
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Login button code	8	Jul 7, 2021
Slideshow not working properly	2	Jan 7, 2023
Help with my responsive home page	2	Dec 14, 2022
Interfering CSS	1	Feb 9, 2024
Need help with code on website (noob)	2	Jul 18, 2022

Replace hover effect by active and focus

Chris

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads