css - 如何为使用 Bootstrap 构建的网站在触摸设备上的点击事件添加视觉反馈？

Question

我使用 HTML5 Boilerplate + Bootstrap 构建网站已经很长时间了，但我仍然没有弄清楚如何应用某种视觉反馈/效果(可能是 :hover 但它不起作用)让用户知道点击一个链接(例如移动菜单的一个元素)。一些客户开始询问/提示“我不明白我在点击什么……”。我尝试在 :hover 和 :focus 上添加一些彩色背景，但它们都不起作用......怎么办？!

Answer 1

首先添加这个库:jquery.mobile.min.js

JavaScript:

// simulate hover effect on touch devices
$('a.add_hover_effect').on('tap', function(e) {
    $(this).addClass('hover_effect');
});
$('a.add_hover_effect').on('touchend', function(e) {
    $('a.add_hover_effect').removeClass('hover_effect');
});

CSS:

a.add_hover_effect.hover_effect {
    background-color: red;
    color: white;
}