如果用户通过触摸设备访问我们的网站,我想忽略所有:hover CSS声明。因为:hover CSS没有意义,如果平板电脑在点击/点击时触发它,它甚至会令人不安,因为它可能会一直停留到元素失去焦点。说实话,我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实,所以这个问题也是现实。

a:hover {
  color:blue;
  border-color:green;
  /* etc. > ignore all at once for touch devices */
}

所以,(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?


当前回答

悬停CSS媒体功能来拯救!仅使用CSS,当设备没有悬停功能时,您可以覆盖样式。

下面的演示由现代触摸设备支持。

/* hover query styles */ a { color: red; font-size: 3em; } a:hover { color: blue; } @media (hover: none) { a:link, a:visited { color: blue; text-decoration: none; border: 0.1em solid currentColor; padding: 0 0.1em; } } /* used to show if demo browser has hover capabilities */ .detection:before { content: 'UNKNOWN'; color: red; } @media(hover) { .detection:before { content: 'YES'; color: green; } } @media (hover: none) { .detection:before { content: 'NO'; } } <p>Hoverable pointer detected: <span class="detection"></span></p> <h3>Experiences between device hover capabilities</h3> <p>If the device has a hover capability, the link below:</p> <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> <p>If the device does not have a hover capability, the link below:</p> <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <p><a href="https://www.google.com">Link</a></p>

注意:请记住,由于Surface PC的主要输入(功能)是鼠标,它最终将是一个蓝色链接,即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。

其他回答

悬停CSS媒体功能来拯救!仅使用CSS,当设备没有悬停功能时,您可以覆盖样式。

下面的演示由现代触摸设备支持。

/* hover query styles */ a { color: red; font-size: 3em; } a:hover { color: blue; } @media (hover: none) { a:link, a:visited { color: blue; text-decoration: none; border: 0.1em solid currentColor; padding: 0 0.1em; } } /* used to show if demo browser has hover capabilities */ .detection:before { content: 'UNKNOWN'; color: red; } @media(hover) { .detection:before { content: 'YES'; color: green; } } @media (hover: none) { .detection:before { content: 'NO'; } } <p>Hoverable pointer detected: <span class="detection"></span></p> <h3>Experiences between device hover capabilities</h3> <p>If the device has a hover capability, the link below:</p> <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> <p>If the device does not have a hover capability, the link below:</p> <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <p><a href="https://www.google.com">Link</a></p>

注意:请记住,由于Surface PC的主要输入(功能)是鼠标,它最终将是一个蓝色链接,即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。

2020解决方案- CSS只-没有Javascript

使用带有媒体指针的媒体悬停将帮助您解决此问题。在chrome Web和android手机上测试。我知道这个老问题,但我没有找到像这样的答案。

@media (hover: hover) and(指针:fine) { A:悬停{颜色:红色;} } <a href="#" >Some Link</a>

试试这个(我在这个例子中使用background和background-color):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

试试这个:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

更新:不幸的是,W3C已经从规范中删除了这个属性(https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1)。

试试这个简单的2019 jquery解决方案,虽然它已经有一段时间了;

将这个插件添加到head: src = " https://code.jquery.com/ui/1.12.0/jquery-ui.min.js " 将此添加到js: 美元(“*”)。On ("touchend",函数(e) {$(this).focus();});//应用于所有元素 一些建议的变化是: $(":输入:复选框,")。On ("touchend",函数(e) {(this).focus);});/ /指定元素 美元(“*”)。On ("click, touchend",函数(e) {$(this).focus();});//包含点击事件 Css: body{游标:指针;} //触摸任意位置结束焦点

笔记

将plugin放在bootstrap.js之前,以避免影响工具提示 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上测试。

引用:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/