Ontouchstart删除悬浮在iPad iphone
ontouchstart remove ahover in ipad iphone
我有一个按钮有悬停效果。然而,我想禁用悬浮在ipad和iphone。它不工作
$(document).ready(function () {
$(".content").hide();
$(".open1").click(function () {
$(this).next().slideToggle(400);
if('ontouchstart' in document){$('#btn_01').unbind('mouseenter mouseleave');}
var btn = $('#btn_01'), isOn = btn.hasClass('on');
if(isOn) { btn.removeClass('on'); }
else if(btn) { btn.addClass('on'); }
});
});
<style type="text/css">
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
#btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
我会采用不同的方法:
jQuery(function($) {
var className = ('ontouchstart' in document ) ? "touch-device" : "desktop-device";
$(document.body).addClass(className);
});
然后你可以使用body.desktop-device
和body.touch-device
来指定样式的调整:
body.desktop-device #btn_01:hover {
background: red;
}
body.touch-device #btn_01 {
background: blue;
}
var a = b ? c : d;
//means:
if ( b ) {
var a = c;
}
else {
var a = d;
}
找到了一个非常简单的方法来解决这个问题,使用CSS @media我将hover的图像更改为原始图像。
#btn_01{btn_01_on.png'}
#btn_01:hover{btn_01_on.png'}
#btn_01.on{btn_01_over.png'}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01:hover{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
相关文章:
- 防止在移动Safari(iPad/iPhone)中长按/长按默认上下文菜单
- mootools点击:继电器没有在ipad/iphone上启动
- 如何通过HTML 5 javascript在本地ipad / iPhone上存储数据,并在设备上线时提交
- JWPlayer在使用API加载方法时无法在iPad / iPhone上播放
- 为什么 $.post 似乎不能在我的网站上的 iPad/iPhone 上运行
- 通过php或javascript检索iPad / iPhone序列号
- 跳过iPad / iPhone上的JavaScript内容
- jQuery在ipad/iphone(mobilesafari)上检测if,并使用jQuery触摸对话框而不是常规的jQ
- 正在删除iPad/iPhone的Javascript
- YouTube API不适用于iPad/iPhone/非Flash设备
- 移动浏览器(iPad/iPhone/iPod/Android)在不断更新图像时崩溃
- PHP多个cookie不能在iPad / iPhone浏览器上工作
- Javascript iPad, iPhone和Android -如何获得页面的全部宽度和高度
- 在iPad/iPhone上滚动时获取scrollTop()
- iPad/iPhone设备上的HTML5音频在被触摸时停止
- Javascript播放器的网络视频流兼容的iPad, iPhone等
- POST请求图片来自iPad/iPhone
- 用于拖放的JavaScript在Ipad / Iphone上不工作
- 在ipad/iphone safari中防止弹性滚动,但允许内容滚动
- Ontouchstart删除悬浮在iPad iphone