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