Changing hover to touch click for mobile devices

Question

I ve had a look around but can t quite find what i m looking for   I currently have a css animation on my page which is triggered by  hover  I would like this to change to  click  or  touch  when the page is resized past width 700px using media queries   Here is what i have at the moment  http   jsfiddle net danieljoseph 3p6Kz   As you can see  the  hover will not work on mobile devices but i still want to ensure it works the same way just by click  not hover   I would rather use css if possible but happy with JQuery also   I have a feeling this is very easy to do but i am just missing something very obvious  Any help would be appreciated   Here is the css animation    info-slide     position absolute    bottom 0    float left    width 100     background url    images blue-back png     height 60px    cursor pointer    overflow hidden    text-align center    transition  height  4s ease-in-out    -webkit-transition  height  4s ease-in-out    -moz-transition  height  4s ease-in-out      info-slide hover     height 300px

User · Answer

Well I agree with above answers but still there can be an another way to do this and it is by using media queries.

Suppose this is what you want to do :

body.nontouch nav a:hover {
    background: yellow;
}

then you can do this by media query as :

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

And for more details you can visit this page.

User · Answer

I think this simple method can achieve this goal  With CSS you can turn off pointer event to  none  then use jQuery to switch classes    x000D   x000D   item  x000D     pointer-events none  x000D     x000D   x000D   item clicked  x000D     pointer-events inherit  x000D     x000D    x000D   item hover  item active  x000D       Your Style On Hover Converted to Tap   x000D    background  000  x000D    x000D   x000D   x000D    Use jQuery to switch classed    x000D   x000D  jQuery   item   click function e   x000D    e preventDefault    x000D      this  addClass  clicked  l x000D      x000D   x000D   x000D

User · Answer

On most devices  the other answers work   For me  to ensure it worked on every device  in react  I had to wrap it in an anchor tag  lt a gt  and add the following   hover   focus   active  in that order   as well as role  button  and tabIndex  0

User · Answer

I am a CSS noob but I have noticed that hover will work for touch screens so long as it s a  hoverable  element  image  link  button  You can do it all with CSS using the following trick     Change your div background to an actual image tag within the div or create a dummy link around the entire div  it will then register as a hover when you touch the image   Doing this will mean that you need the rest of your page to also be  hoverable  so when you touch outside of the image it recognizes that info-slide hover has ended  My trick is to make all of my other content dummy links   It s not very elegant but it works

User · Answer

If you use  active selector in combination with  hover you can achieve this according to w3schools as long as the  active selector is called after the  hover selector     info-slide hover   info-slide active     height 300px       You d have to test the FIDDLE in a mobile environment  I can t at the moment   correction - I just tested in a mobile  it works fine

User · Answer

document addEventListener  touchstart   function       true     This snippet will enable hover effects for touchscreens

User · Answer

A CSS only solution for those who are having trouble with mobile touchscreen button styling  This will fix your hover-stick   active button problems   x000D   x000D  body  html     width  600px    p     font-size  20px     button     border  none    width  200px    height  60px    border-radius  30px    background   00aeff    font-size  20px     button active     background  black    color  white      delayed     transition  all 0 2s    transition-delay  300ms      delayed active     transition  none    x000D   lt h1 gt Sticky styles for better touch screen buttons  lt  h1 gt    lt button gt Normal button lt  button gt    lt button class  delayed  gt  lt a href  https   www google com   gt Delayed style lt  a gt  lt  button gt    lt p gt The CSS  active psuedo style is displayed between the time when a user touches down  when finger contacts screen  on a element to the time when the touch up  when finger leaves the screen  occures    With a typical touch-screen tap interaction  the time of which the  active psuedo style is displayed can be very small resulting in the  active state not showing or being missed by the user entirely   This can cause issues with users not undertanding if their button presses have actually reigstered or not  lt  p gt    lt p gt Having the the  active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button  lt  p gt  x000D   x000D   x000D

User · Answer

I got the same trouble  in mobile device with Microsoft s Edge browser  I can solve the problem with  aria-haspopup  true   It need to add to the div and the  hover   active   focus for the other mobile browsers   Example html    lt div class  left bar  aria-haspopup  true  gt    CSS    left bar hover   left bar focus   left bar active      left  0

User · Answer

You can add onclick    to hovered element  Hover will work after that   Edit  But you really shouldn t add anything style related to your markup  just posted it as an alternative

[css] Changing :hover to touch/click for mobile devices

Examples related to css

Examples related to css-animations