:hover 和 :active on touch 在移动设备上？答案

【问题标题】：:hover and :active on touch in mobile devices?:hover 和 :active on touch 在移动设备上？
【发布时间】：2021-03-17 11:09:02
【问题描述】：

我有一个 div 有

.mydiv{
    background-color:white;
    color:red;
}

.mydiv:hover{
  background-color:red;
  cursor: pointer;
  color:white;
}

而且我希望在触摸设备上也有类似悬停的良好属性。我得到的行为并不完全是我想要的。确实会发生类似悬停的行为，但它是粘性的。我发现如果我改为添加

.mydiv:active{
  background-color:red;
  cursor: pointer;
  color:white;
}

然后粘性消失，它可以按我的意愿工作。但是，正常的悬停行为（在非触摸设备上）消失了。 :(

这样做的正确方法是什么？

【问题讨论】：

标签： html css button menu hover

【解决方案1】：

只需使用媒体查询。智能手机的最大纵向模式屏幕宽度为 480 像素。所以你告诉所有屏幕在 480 像素或以下不同的 CSS，然后屏幕在 480 像素以上。

.mydiv{
    background-color:white;
    color:red;
}

@media only screen 
  and (min-width: 481px) {
    .mydiv:hover{
      background-color:red;
      cursor: pointer;
      color:white;
    }
}

@media only screen 
  and (max-width: 480px) {
    .mydiv:active{
      background-color:red;
      cursor: pointer;
      color:white;
    }
}

【讨论】：

我认为这并不能完全解决它。例如，iPad 的宽度可以远高于 480 像素，但仍应具有触摸（活动）行为。
您可以简单地提高像素数以包括平板电脑。还可以将其与纵向或横向模式结合使用。
您将如何提高像素数以包括 iPad Pro，而不会影响不全宽使用浏览器的桌面用户？我不介意浏览器视口狭窄的人看到“移动”版本，但我不希望体验被破坏，如果他们也看到 :active 版本而不是 :hover 版本.这有意义吗？

【解决方案2】：

有一个简单的解决方案。这是代码！

function myFunction(){
    var x = document.getElementById("DIV");
  x.style.backgroundColor="red";
  x.style.cursor="pointer";
  x.style.color="white"
}
function my2Function(){
    var x = document.getElementById("DIV");
  x.style.backgroundColor="white";
  x.style.color="red"
}

.mydiv {
  background-color: white;
  color: red;
}

.mydiv:active {
  background-color: red;
  cursor: pointer;
  color: white;
}

<div class = "mydiv" id="DIV" onmouseover="myFunction()" onmouseleave="my2Function()">
  hi
</div>

【讨论】：