如何將鏈接，按鈕和div懸停在移動設備上？

-2

在我的CSS，I型是這樣的：

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

這似乎徘徊在我的桌面上正常，但是在我的iPhone和其他觸摸屏設備，我似乎無法使按鈕懸停。

來源

2017-09-05 Billy Gibbs

移動設備不具備的：hover – TylerH

既然有沒有鼠標光標，您無法在移動設備上懸停按鈕。但是，您可以正確使用.activate來設置背景顏色，如下所示：'.button：activate {...}' – WebGuy

請參閱https://stackoverflow.com/questions/2427447/does-css-hover-work-on - 移動設備 – TylerH

在移動設備上沒有hover事件，您可以定義懸停行爲，它可以在桌面上使用。但在移動設備上，只有通過點擊/觸摸才能看到此懸停。

來源

2017-09-05 15:10:54

哈弗意味着另一件事。在這種情況下，將鼠標光標放在HTML按鈕上或使用任何元素。

在電話的情況下，沒有鼠標光標。它總是一個點擊。在大多數情況下，盤旋只會在點擊或觸摸時顯示。如果你真的需要這個，你可以嘗試Javascrit onclick()或其他功能，所以當他們點擊或觸摸時，你可以添加一些東西。

來源

2017-09-05 15:19:02 mw509

我查看了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'); 
    } 
});

來源

2017-11-26 20:14:02 kakaja

如何將鏈接，按鈕和div懸停在移動設備上？

回答

相關問題