[英]How to remove Hover Effect from DIV when mobile device is detected using javascript
I have using redirection-mobile.js for detecting the mobile device. 我已经使用redirection-mobile.js来检测移动设备。 The code for the same is as follows:
相同的代码如下:
if (screen.width < 574) {
var ref = document.referrer;
var urls = new Array("http://127.0.0.1/eflip","http://127.0.0.1/eflip");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
}
else {
stop ;
}
}
else
{
window.location = "http://127.0.0.1/eflip";
}
}
if (r==true)
is the condition to detect the mobile device. if (r==true)
是检测移动设备的条件。 Now I want to remove all the hover effects. 现在,我要删除所有悬停效果。 I have tried
$('element').removeClass()
, but its not working. 我已经尝试了
$('element').removeClass()
,但是它不起作用。
Every Help and Comment will be highly appreciated. 每个帮助和评论将不胜感激。 Thanks to all in advance :-)
在此先感谢所有:-)
you're talking about removing events or css effects? 您正在谈论删除事件或CSS效果? if css effects, the elegant way to go is via css, instead of removing the css already applied, just set the css :hover inside a media query like so:
如果要使用css效果,最好的方法是通过css,而不是删除已应用的css,只需在媒体查询中设置css:hover即可,如下所示:
@media (min-width: 480px) {
/*css you want to apply only in desktop */
a:hover{...}
}
Edit 编辑
min-device-width: 480px) {
/*css you want to apply only in desktop */
a:hover{...}
}
You should detect viewport using jQuery 您应该使用jQuery检测视口
jQuery : jQuery的:
<script type="text/javascript">
jQuery(document).ready(function(){
var viewport = jQuery(window).innerWidth();
if( viewport < 480 )
{
// for mobile device
jQuery('#yourDiv').css({'transform', 'none !important'});
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.