Question

我有这些课程，所以当我将一个项目转移到它进行过渡时，问题是当我在移动视图中时，它退出浏览

.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

您不希望在display:none上使用:hover，因为这会使div隐藏在悬停状态，这不起作用。相反，我建议让它什么都不做。

在桌面设备上，transform: scale项目1.5，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; } } 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>

这是一个尝试它的片段。

{{1}}

{{1}}

Answer 2

首先将媒体查询更改为max-width，然后重置要为移动设备重置的属性。

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

此外，如果您想删除移动设备中的转换，您还可以添加

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

在移动设备中禁用悬停

2 个答案: