如果用户通过触摸设备访问我们的网站，我想忽略所有:hover CSS声明。因为:hover CSS没有意义，如果平板电脑在点击/点击时触发它，它甚至会令人不安，因为它可能会一直停留到元素失去焦点。说实话，我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实，所以这个问题也是现实。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?
当前回答
试试这个(我在这个例子中使用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;
}
其他回答
它对我很有帮助:链接
function hoverTouchUnstick() {
// Check if the device supports touch events
if('ontouchstart' in document.documentElement) {
// Loop through each stylesheet
for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
var sheet = document.styleSheets[sheetI];
// Verify if cssRules exists in sheet
if(sheet.cssRules) {
// Loop through each rule in sheet
for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
var rule = sheet.cssRules[ruleI];
// Verify rule has selector text
if(rule.selectorText) {
// Replace hover psuedo-class with active psuedo-class
rule.selectorText = rule.selectorText.replace(":hover", ":active");
}
}
}
}
}
}
在浏览了前面的答案之后，这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码，则删除
@media (hover: hover) {
.toggle-label:hover {
background-color: #69c9ff;
color: #ffffff;
}
}
要使当前的答案也在IE11中工作(如果你仍然支持它的话):
@media (hover: hover) and (pointer: fine)， only screen and (-ms-high-对比度:active)， (-ms-high-对比度:none) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>
你可以使用Modernizr JS(也见这个StackOverflow的答案)，或自定义JS函数:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if ( is_touch_device() ) {
$('html').addClass('touch');
} else {
$('html').addClass('no-touch');
}
来检测浏览器对touch事件的支持，然后分配一个常规的CSS属性，用html遍历元素。无接触类，像这样:
html.touch a {
width: 480px;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
width: auto;
color:blue;
border-color:green;
}
使用带有媒体指针的媒体悬停将帮助您解决此问题。
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
