我的 css :hover 属性在单击元素并保留在那里时不会在移动设备上删除。并且 :active 属性在延迟后也可以工作

Question

我有一个带有以下 css 代码的按钮：

.queueAdd {
    background-color: #008d3fed;
    transition: 0.2s;
}

.queueAdd:hover {
    scale: 1.1;
    cursor: pointer;
}

.queueAdd:active {
    scale: 0.7;
    background-color: #00853ced;
}

它在电脑上运行良好，但在我的移动设备上，我发现按下按钮后悬停效果仍然存在，这当然是不希望的。这就是我点击按钮后的样子，

此外，使用

:acitve

伪类，当我单击按钮时，按钮的尺寸会变小，并且它在 PC 上按预期工作，但在移动设备上它不起作用，并且只有当我继续按下时，活动效果才会起作用有时按钮不是用户会做的。

注意：我使用活动伪类来显示用户单击按钮时的效果。

注 2：我实际上并没有使用

<btn>

标签，而是使用

<p>

标签作为按钮，我刚刚尝试使用

<btn>

标签，但在使用时它不会放大或缩小。

Answer 1

我认为这是设计使然，因此悬停菜单也适用于移动设备。我还认为你可以使用

mouse

事件和一些 JavaScript 来解决这个问题。也许使用

touch

事件会更精确。

这可能有用：

var button = document.querySelector(".queueAdd");
button.addEventListener('mouseenter', function(ev) {
  button.classList.add("hover")
})

button.addEventListener('mouseleave', function(ev) {
  button.classList.remove("hover")
})

button.addEventListener('mosuedown', function(ev) {
  button.classList.add("active")
})

button.addEventListener('mouseup', function(ev) {
  button.classList.remove("active")
})

.queueAdd {
  background-color: #008d3fed;
  transition: 0.2s;
  cursor: pointer;
}

.queueAdd:hover,
.queueAdd.hover {
  transform: scale(1.1);
}

.queueAdd:active,
.queueAdd.active {
  transform: scale(0.7);
  background-color: #00853ced;
}

<button class="queueAdd">button</button>