css - 在手机中禁用悬停

Question

我有这些类(class)，所以当我悬停一个元素时它会进行转换，问题是当我在移动 View 中时，它会退出浏览

.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;
}

我正在尝试在移动设备上禁用它，但它不起作用，只有在正常 View 下转换才会卡住

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

非常感谢您的帮助。问候

Answer 1

首先将您的媒体查询更改为最大宽度，然后重置您想要为移动设备重置的属性。

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

此外，如果您想在移动设备中删除过渡，您还可以添加

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