我无法将元素悬停在移动设备上。如何将链接,按钮和div悬停在移动设备上?
在我的CSS,I型是这样的:
.button:hover {
background-color: #fff;
}
这似乎徘徊在我的桌面上正常,但是在我的iPhone和其他触摸屏设备,我似乎无法使按钮悬停。
我无法将元素悬停在移动设备上。如何将链接,按钮和div悬停在移动设备上?
在我的CSS,I型是这样的:
.button:hover {
background-color: #fff;
}
这似乎徘徊在我的桌面上正常,但是在我的iPhone和其他触摸屏设备,我似乎无法使按钮悬停。
在移动设备上没有hover
事件,您可以定义悬停行为,它可以在桌面上使用。但在移动设备上,只有通过点击/触摸才能看到此悬停。
哈弗意味着另一件事。在这种情况下,将鼠标光标放在HTML按钮上或使用任何元素。
在电话的情况下,没有鼠标光标。它总是一个点击。在大多数情况下,盘旋只会在点击或触摸时显示。如果你真的需要这个,你可以尝试Javascrit onclick()
或其他功能,所以当他们点击或触摸时,你可以添加一些东西。
对于jQuery/CSS的这个问题的一个非常快速的解决方案,我做了以下。
写样式我的元素是这样的:
.one-block:hover, .one-block.hover { ... }
它定位:
.one-block { position: relative; }
加入此块中最后一个元素 - >.mobile-mask
:
<div class="one-block">
....
<div class="mobile-mask"></div>
</div>
定位.mobile-mask
:
.mobile-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
隐藏它用于非移动(这部分不是精确在所有:只利用CSS。如果您通过其他方式检测移动设备,并且比如给一个班级正文,而不是更准确。在这种情况下,我只需要一个快速的解决方案):
@media (min-width: 681px) {
.mobile-mask {
display: none;
}
}
创建的JavaScript将添加/删除.hover
类:
$('.mobile-mask').on('click', function(){
$('.list .mobile-mask').show();
$('.list .one-block').removeClass('hover');
$(this).hide();
$(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
var windowWidth = $(this).width();
if(windowWidth > 680){
$('.list .one-block').removeClass('hover');
}
});
移动设备不具备的:hover – TylerH
既然有没有鼠标光标,您无法在移动设备上悬停按钮。但是,您可以正确使用.activate来设置背景颜色,如下所示:'.button:activate {...}' – WebGuy
请参阅https://stackoverflow.com/questions/2427447/does-css-hover-work-on - 移动设备 – TylerH