在移动设备上使用active时，div元素仅在悬停时显示。

Question

我有一些div，可以在悬停时显示更多信息。 我想将其扩展到移动设备上。但是由于手机屏幕没有悬停操作，因此我想为移动设备进行适应。我尝试过使用：active，但那没起作用。

ps：

我更喜欢使用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开发工具中可以运行，但在我的实际手机浏览器中无法运行。可能是必要的规则被覆盖了吗？有什么调试方法吗？

- user2623706

---

我使用你的代码创建了一个fiddle，在iPhone/Safari和Android/Chrome上运行良好。你能否提供更多关于你遇到问题的环境细节？ - Entalpia

嗯...我正在使用iPhone / Safari，触摸图标根本没有任何作用。我不知道哪里可能有所不同。你需要哪些其他细节信息？ - user2623706

有一个名为焦点伪类的东西，可以尝试使用它。 - Rojen

尝试了一下。已更新原帖并附上结果。 - user2623706

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

- Vch Cvh Hvc