如何将链接，按钮和div悬停在移动设备上？

问题描述：

在我的CSS，I型是这样的：

.button:hover { 
    background-color: #fff; 
}

这似乎徘徊在我的桌面上正常，但是在我的iPhone和其他触摸屏设备，我似乎无法使按钮悬停。

移动设备不具备的：hover – TylerH

既然有没有鼠标光标，您无法在移动设备上悬停按钮。但是，您可以正确使用.activate来设置背景颜色，如下所示：'.button：activate {...}' – WebGuy

请参阅https://stackoverflow.com/questions/2427447/does-css-hover-work-on - 移动设备 – TylerH

答

在移动设备上没有hover事件，您可以定义悬停行为，它可以在桌面上使用。但在移动设备上，只有通过点击/触摸才能看到此悬停。

答

哈弗意味着另一件事。在这种情况下，将鼠标光标放在HTML按钮上或使用任何元素。

在电话的情况下，没有鼠标光标。它总是一个点击。在大多数情况下，盘旋只会在点击或触摸时显示。如果你真的需要这个，你可以尝试Javascrit onclick()或其他功能，所以当他们点击或触摸时，你可以添加一些东西。

我查看了5.5英寸android 7 chrome浏览器上的两个链接，它们的表现都一样。单击后背景会发生变化。虽然我保持点击的背景不会改变。我能给出的最佳理由和解释是设备和浏览器对这些事情的反应都不同。虽然有些人可能会尽可能地尝试复制体验，但其他人只是知道这两种设备并不相同，并将它们分开。所以我的建议是关注通用功能而不是少数。盘旋只是不这样工作。就像我说的，你将不得不使用javascript来玩这个游戏。 – mw509

你可以从这个网站运行一些测试它为你模拟几个实例[链接]（http://www.mobilephoneemulator.com/） – mw509

答

对于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'); 
    } 
});

如何将链接，按钮和div悬停在移动设备上？

相关推荐