Changing :hover to touch/click for mobile devices

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

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

MindlessRanger

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.

Steve_Angel

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:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

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.

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 <a> and add the following: :hover, :focus, :active (in that order), as well as role="button" and tabIndex="0".

document.addEventListener("touchstart", function() {}, true);

This snippet will enable hover effects for touchscreens

来源：https://stackoverflow.com/questions/22559756/changing-hover-to-touch-click-for-mobile-devices

标签

css

css-animations