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

【问题标题】：div shows on hover but not on mobile using activediv 在悬停时显示，但在使用活动的移动设备上不显示
【发布时间】：2019-09-04 04:08:06
【问题描述】：

所以我有一些 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 开发工具，但不适用于我的实际手机浏览器。必要的规则是否有可能被覆盖？关于如何调试的任何想法？

【问题讨论】：

我使用您的代码创建了一个小提琴，并且在 iPhone/Safari 和 Android/Chrome 上运行良好。您能否提供有关您遇到问题的环境的更多详细信息？
hmm... 我正在使用 iPhone/Safari 并且触摸图标完全没有任何作用。我不知道有什么不同。您还需要哪些其他详细信息？
有焦点伪类试试用那个。
试过这个。用结果更新了原始帖子

标签： html css mobile css-selectors

【解决方案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;
}

【讨论】：