CSS hover/touch on mobile (only as admin)

Let us know what PHP changes you made to get this working (when you are logged in).

Not sure what you were asking for, but this is an example of my code:

HTML

<div id="layer">
  <div id="overlay"></div>
</div>

CSS

#layer {
  z-index:2;
  width:150px;
  height:200px;
  background:#ffffff;
}

#overlay {
  z-index:1;
  width:150px;
  height:200px;
  background:#000000;
  opacity:0.6;
  display:none
}

#layer:hover #overlay,
#layer:focus #overlay {
  display:block;
}

Has anybody an idea why this code works on a mobile only when I’m logged in as admin?

Thanks!

I’m experiencing the same issue. :focus doesn’t respond to touch on mobile when logged out. Works like a charm when logged in. It’s a real stumper. Any resolve or insight would be greatly appreciated.

[UPDATE]

Turns out my issue with :focus not responding was due to my “loading” animated gif which was a background image in a 100% x 100% (otherwise) empty div container. Doh! (Why it didn’t affect the :focus state when logged in as an admin is another question I don’t have an answer to…). Removing the blanket div resolved the issue. (the loading animation was more aesthetic than functional)

As was my case, perhaps your issue lies elsewhere as well.

Cheers!