如何用纯css在移动端做点击效果

Question

大家好，我是 html 和 css 的新手。尽管我有 css 桌面效果，但我正在尝试制作移动效果。我想制作“如果有人点击手机中的部分，将背景颜色更改为 f5f5dc”。我当前的代码是...

.section2 {
  height : auto;
  transition :0.2s;
  margin : 0.5em 0em 0.5em 0em;
  padding: 10px;
  background-color: #ffffff;
  border: 0.1px solid #302f2f34;
}
@media (hover: hover) { /* disable the effect on mobile phone */
  .section2:hover {
    transition :0.2s;
    transform: translate(2%, 0%);
    background-color: rgba(248, 123, 21, 0.264);
    cursor: pointer; } 
}

我知道如果我使用 jQuery 会很容易，但我不想使用 jQuery... 有没有办法用纯 css?

Answer 1

@media 规则用于将 min/max 断点设置为以下规则应适用的位置。你可以阅读它 here.

要回答您的问题，要仅在元素被单击时设置样式，您可以使用 :active pseudo-selector。像这样：

.section2:active {
  background-color: tomato;
}

Answer 2

您可以在 @media 查询中使用 tabindex 和 :focus 来“欺骗”它。

.section2 {
  height: auto;
  transition: 0.2s;
  margin: 0.5em 0em 0.5em 0em;
  padding: 10px;
  background-color: #ffffff;
  border: 0.1px solid #302f2f34;
}

.section2:hover {
  transition: 0.2s;
  transform: translate(2%, 0%);
  background-color: rgba(248, 123, 21, 0.264);
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  .section2:focus {
    transition: 0.2s;
    transform: translate(2%, 0%);
    background-color: rgba(248, 123, 21, 0.264);
    cursor: pointer;
  }
}

<div class="section2" tabindex="0">
</div>

如何用纯css在移动端做点击效果

How to make click effect in mobile with pure css

css

click

hover