0

So i have developed a website and created a feature where when you hover over a box it reveals text however when i tested my website on mobile you cant hover do there being no cursor and it doesn't recognise clicks if i was to click the box so how can i make it compatible so that if on a mobile it works the same just with a click etc

    .container .box .content{
    position: absolute;
    top: 100%;
    height: calc(100% - 100px);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transition: 1s;
    opacity: 0;
}


.container .box:hover .content{
    top: 100px;
    opacity: 1;
}

.container .box .content h3{
    margin: 0 0 10px;
    padding: 0;
    color: #fff;
    font-size: 24px;
}

.container .box .content p{
    justify-content: center;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
}

This is how it looks on website when i hover over a box

any help is much appreciated

tester54321
  • 1
  • 1
  • 4

2 Answers2

0

Welcome to SO!

Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched point by default.

The only way they can sense interaction is touch, which is akin to a click or selection, so :active in CSS or onclick in Javascript are your only options currently.

There you go use :focus and :active as well along with :hover

.container .box:hover .content,
.container .box:focus .content,
.container .box:active .content{
    top: 100px;
    opacity: 1;
}

:focus represents the state when the element is currently selected to receive input and

:active represents the state when the element is currently being activated by the user

Ref links https://www.w3schools.com/css/css_pseudo_classes.asp

Awais
  • 4,752
  • 4
  • 17
  • 40
0

This question is more about UI/UX for mobile state, and the reason is you can't hover on top of element in touch screen.

Element transition to hover state on click is no intuitive on touch screen.

For example: "Accept" button color Transform from grey to green. (How the use supposed to know the button is clickable?).

Substitutes:

You can trigger animation when element enter view, here is a link to how implement: How can I tell if a DOM element is visible in the current viewport?

or

leave it with active hover state on mobile.

michelnem
  • 104
  • 4