So I have some divs that display more info on hover. I want to extend this to mobile. But since phone screens don't have a hover action I want to adapt this for mobile. I have tried using :active but that does not do anything

ps:

I prefer using css for this but if there is no way to do so then JQuery solutions are acceptable.

<div class="app">
   <i class="fa fa-adjust fa-3x"></i>
   <div class="app-text">App 1</div>
   <div>
      <ul class="hover-list">
         <li>first</li>
         <li>second</li>
         <li>third</li>
      </ul> 
   </div>
</div>

<div class="app">
   <i class="fa fa-anchor fa-3x"></i>
   <div class="app-text">App 2</div>
   <div>
      <ul class="hover-list">
         <li>first</li>
         <li>second</li>
         <li>third</li>
      </ul> 
   </div>
</div>

And here is the style:

.app:hover, .app:active { 
    transform: scale(1);
    background-color: #8a898a;
    border-radius: 10px;
    color: white;
}

.app:hover > i { color: white; }

.app:hover ul, .app:active ul { 
    display: block;
}

UPDATE

per suggestions here is what I now have:

.app:hover, .app:active, .app:focus { 
    transform: scale(1);
    background-color: #8a898a;
    border-radius: 10px;
    color: white;
}

.app:hover > i,
.app:active > i, 
.app:focus > i { color: white; }

.app:hover ul, .app:active ul, .app:focus ul { 
    display: block;
}

This works in the FireFox dev tools but not in my actual phone browser. Is it possible the necessary rules are getting overwritten? Any ideas on how to debug?

0 Answers