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开发工具中有效，但在我的实际电话浏览器中无效。必要的规则是否有可能被覆盖？有关如何调试的任何想法？

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

div在悬停状态下显示，但在移动设备上未显示

1 个答案: