禁用懸停在移動

Question

我有這些類，所以我母雞懸停它做一個過渡的項目，問題是當I'm移動視圖，其瀏覽的出口

.ftContainerOut { 
    padding-right:10px; 
    padding-bottom:20px; 
    transition: all 0.5s ease-in-out; 
    position: relative; 
    cursor:pointer; 
    z-index:1; 
} 
.ftContainerOut:hover { 
    transform: scale(1.5); 
    z-index:10; 
} 

我想這在手機上禁用它，但它不工作，只是在正常的看法過渡卡住

@media screen and (min-width: 600px){ 
    .ftContainerOut:hover { 
    display: none; 
    } 
} 

幫助是非常讚賞。問候

Answer 1

你不想在:hover上使用display:none，因爲這將使div躲在懸停，這將無法正常工作。相反，我建議讓它無所事事。

在桌面上，您可以通過1.5transform: scale的項目，所以在移動transform: scale它由1，這因爲它已經是1，它不會改變。

同樣的原則z-index，在桌面上:hover它改變10，所以在移動它「變」做出1，但它已經是1，再沒有什麼改變。

所以CSS是：

@media screen and (max-width: 600px) { 
    .ftContainerOut:hover { 
    transform: scale(1); 
    z-index: 1; 
    } 
} 

這裏有一個片段來嘗試一下。

.ftContainerOut { 
 
    padding-right: 10px; 
 
    padding-bottom: 20px; 
 
    transition: all 0.5s ease-in-out; 
 
    position: relative; 
 
    cursor: pointer; 
 
    z-index: 1; 
 
} 
 

 
.ftContainerOut:hover { 
 
    transform: scale(1.5); 
 
    z-index: 10; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .ftContainerOut:hover { 
 
    transform: scale(1); 
 
    z-index: 1; 
 
    } 
 
}

<div class="ftContainerOut" style="width: 100px; height: 100px; background: green;"></div>

Answer 2

首先改變你的媒體查詢到最大寬度，然後重置要重置的移動性能。

@media screen and (max-width: 600px){ 
    .ftContainerOut:hover { 
    transform: scale(1); 
    z-index:1; 
    } 
} 

此外，如果你想刪除手機過渡，你還可以添加

@media screen and (max-width: 600px){ 
    .ftContainerOut { 
    transition: none; 
    } 
}