{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 在下西门庆 的问题《Deal with touch desvices and hover effects》','https://www.manongdao.com/q-1125027.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I try to remove or prevent all hover effect on a touch device. I try to use several scripts, but it does not work for me. How can I test it, with dev tools? I try such script but have some error. Cannot read property 'addEventListener' of null. But it works here codepen There is error cause the dom tree has not loaded yet?
<html class="hover-active">
$(window).on('load', function() {
if (!('addEventListener' in window)) {
return;
}
var htmlElement = document.querySelector('html');
function touchStart() {
htmlElement.classList.remove('hover-active');
htmlElement.removeEventListener('touchstart', touchStart);
}
htmlElement.addEventListener('touchstart', touchStart);
});
also I try this one
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){}
Also I try use modernizr, it works only for each selector inside html.touch and html.no-touch
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')
}
html.touch .hover-me:hover {
pointer-events: none !important;
cursor: pointer;
}
html.touch a:hover {
pointer-events: none !important;
cursor: pointer;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch .hover-me:hover {
width: auto;
color:blue;
background:green;
}
html.no-touch a:hover {
width: auto;
color:blue;
background:green;
}
But I need remove all :hover selector, the * does not work. Also It's not working.
.hover-me:hover {
background: yellow;
}
html.touch .hover-me:hover {
pointer-events: none !important;
cursor: pointer;
}
To remove all hover effects on touch devices, you can use CSS Media Queries to make sure the device fully responds to hover before applying any
:hoverstyles by placing them inside@media (hover: hover)