Css hover not working on IOS/mobile

Hi,

so i have this page http://www.mcsuk.org/support_mcs.php/Join+Donate+Adopt/Join+MCS/Join+MCS and if you hover the large images it changes to give you more info and a link. Trouble is on an ipad and iphone the hover doesn’t work. My Microsoft phone and Android phones work fine.

This is the CSS i’ve applied

.hide {
    display: none;
}
/*show .ab*/
.show:hover .hide, .show:focus .hide, .show:active .hide {
  display: block;
    position:absolute;
    top:0;
    left:0;
    min-height:306px;
    width:306px;
  max-width:100%;
    color:white;
    background:orange;
margin:auto;
padding-top:30px;
box-sizing:border-box;
}
.hide  p{
display:block;
width:250px;
padding:5px 5px 0px 5px;
font-size:100%;
text-shadow:none;
}
.hide  p:nth-child(1){
font-weight:bold;
font-size:120%;
}

I’ve just added the Focus and Active as i read that should fix it most of the time but it doesn’t seem to have. Is there a way of re-writing it to work without adding JS etc.

thanks

1 Like

think i’ve sorted it now. I don’t see it as a pretty fix but it seem to work. https://css-tricks.com/forums/topic/click-function-for-hover-states-on-touch-devices/page/2/

So for the container div i added onclick="void(0)" and that seems to work on the old ipad i’m using for testing.

If there is a pure css way it would be nice but at least people can click through at the moment as far as i can tell.

Hover is a bit tricky on devices as they all handle it a different way as there is not really a hover on touch. Some devices treat a first touch as a hover and a second touch will activate the link but usually (not always) this is only applied to anchors.

There are various fixes but the simplest is the empty onclick method you are using.

If you really want a hover effect that only stays while the element is touched then you will need js and and do it like this. The js adds a class to the element when touched and removes it on touchend. Its the class that creates the hover effect and not :hover. Unlike the click method you are never stuck with an element being in the hover state.

However, I don’t think the above method would be any benefit to you as you want the link on the hover element to be clicked and that is a little tricky with the method above.

cool thanks. Seems like i’ve probably done it the best way for now then. Will stick with it then.

thanks