div 在悬停时显示，但不在使用活动的移动设备上显示

Question

所以我有一些div在悬停时显示更多信息。我想将其扩展到移动设备。但是由于手机屏幕没有悬停操作，我想将其改编为移动设备。我试过使用：active，但这没有任何作用

附言：

我更喜欢为此使用 css，但如果没有办法这样做，那么 JQuery 解决方案是可以接受的。

<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>

这是样式：

.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;
}

更新

根据建议，这是我现在拥有的：

.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;
}

这适用于FireFox开发工具，但不适用于我的实际手机浏览器。是否有可能覆盖必要的规则？关于如何调试的任何想法？

Answer 1

也许使用复选框？

这是您想要的效果吗？https://jsfiddle.net/qunawes3/

.HTML

<input type="checkbox" id="appone">
<label for="appone">
  <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>
</label>
<input type="checkbox" id="apptwo">
<label for="apptwo">
  <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>
</label>

.CSS

.app:hover,
#appone:checked + label > .app,
#apptwo:checked + label > .app{
  transform: scale(1);
  background-color: #8a898a;
  border-radius: 10px;
  color: white;
}
.app:hover > i {
  color: white;
}
.app:hover ul,
#appone:checked + label > .app,
#apptwo:checked + label > .app{
  display: block;
}
input {
  display: none;
}