4

I know that touch-screen devices do not have a hover functionality. However, it seems that if I click on a div then it acts like the pseudo class hover is applied.

For example, I don't understand this questions Changing :hover to touch/click for mobile devices - because for me the given js-fiddle works with all mocked mobile devices offered by Chrome. However it is stated in there that this is not working:

As you can see, the :hover will not work on mobile devices

Also from here Does css hover work on mobile devices? it looks to me like hover should not work on mobile in general.

At https://webdesign.tutsplus.com/articles/best-practices-for-responsive-dropdown-menus--cms-35212 its even recommended to add a event listener for click (item 3.) but only apply it on document.documentElement.clientWidth < 960 to avoid having hover and click interfering on desktop.

However, when I try the simple hover dropdown snippet from below with the Chrome inspection tool for all possible mobile devices to choose from, then click just works as expected (I cannot close the submenu after click, but that is okay, because for a real site I would have a hamburger menu).

li {
    padding: 50px;
    border: solid;
}
.submenu {
    display: none;
}
.submenu-container:hover .submenu {
     display: block;
}
ul{
  list-style: none
}
li {
  display: block;
}
<ul  id="main-list">
    <li><a href="#">Hallo</a></li>
    <li>
        <div class="submenu-container">
            <button>Dropdown</button>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item A</a></li>
                    <li><a href="#">Item B</a></li>
                    <li><a href="#">Item C</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

My question is, is the Chrome inspection tool correct, or will a click not work on hover on mobile? Is there any issue that I am not aware of? I do not understand all these SO question, how to make hover work on mobile if it seems to work out of the box.

Adam
  • 25,960
  • 22
  • 158
  • 247
  • 1
    As the mobile screens are made in such a way that the minute you place your finger on the screen, the back end work is rendered automatically and the scroll functionality comes into effect. why don`t you just add a hamburger style button and add your hover content inside it and when user clicks on that button, work is simple. – sravanTG Jul 24 '21 at 11:22
  • 1
    On every mobile I've had, tapping an element activates whatever is in the `:hover`. – Timothy Alexis Vass Jul 31 '21 at 08:33

0 Answers0