Question

是否可以仅使用CSS在触摸设备上设置按钮样式？

我知道:hover用于添加样式，但是当用户按下按钮并移至页面背景时，我无法删除样式。

是否只有CSS解决方案，或者我需要深入研究JS？

Answer 1

您可以使用:focus

.btn{
  border: solid 0px;
  color: white;
  background-color:blue;
  padding:4px 10px;
  font-weight: 450;
  font-size: 15px;
}

.btn:hover,
.btn:focus{
  cursor: pointer;
  background-color:green;
}

<input 
class="btn" 
type="submit" 
value="Button" 
>

尝试

<body ontouchstart="">
...
</body>

Source

Answer 2

尝试一下：

body::after{ content: "I don't know what you are using to click" }

@media (pointer: coarse) {
  body { background: crimson }
  body::after{ content: "Your primary input mechanism is a finger" }  
}

@media (pointer: fine) {
  body { background: goldenrod }
  body::after{ content: "Your primary input mechanism is a mouse" }
}

仅在触摸设备上使用CSS按下按钮时将样式应用于按钮？

2 个答案: