Question 137275 in Html Question posted in
Some basic documentation can be found here.

Html – How to make :hover not work on mobile screens in @media?

I need to remove the :hover action on the mobile screen in the @media request.

Sample code:

.podcasts {
  font-size: 20px;
  font-family: sans-serif;
  color: #121723
}

.podcasts:hover {
  color: #ff0000;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

<a href="#lala" class="podcasts">podcast</a>

I found a solution: write :hover separately in @media, and not in general styles. But I’m not sure that this is the right way to solve it. Are there other ways to do that?

Sample code the solution I found:

@media (min-width: 1050px) { 
 .podcasts: hover { 
  color: #ff0000;
 }
}
Tags:

2

Answers


  1. 0

    The solution is to define hover for the specific media (in this case the mobile).

    However, hover is not working on mobile device so you can even leave as it is in the general style.

    Login or Signup to reply.
  2. 0

    When you want to apply a hover effect to an element on a website, you can use CSS to style the element when the user hovers over it with their mouse cursor. However, on mobile devices, there is no mouse cursor, so the hover effect needs to be triggered by touch instead.

    To apply a hover effect that works on only for desktop devices, you can use CSS media queries to apply the hover effect only on screens with a minimum width, such as 1050 pixels. This ensures that the hover effect is only applied on larger screens where a mouse cursor is present.

    @media (min-width: 1050px) {
  .podcasts:hover {
    color: #ff0000;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search