Question

https://codepen.io/DubCoder/pen/poEQJap 我真的很喜欢桌面上的这种悬停效果，但是当我在移动设备上向我的朋友展示我的网站时，他们触摸图像，它会放大/着色，但它仍然保持这种状态，即使在他们之后再次触摸它。只有在滚动离开后，它才会恢复到原来的黑白状态。

我希望每次您在移动设备上触摸照片时都能在两种状态之间切换。我不知道该怎么做。我确信有一种方法可以使用媒体查询或 JS 来识别用户何时在移动设备上，并在点击时添加/删除彩色状态。

我认为涉及伪类的事实可能会让事情变得更棘手。

const dialogflow = await google.dialogflow({
  auth: oAuth2Client
  version: 'v2beta1'
  // declare location here as well?
})

try {
  const fetchAgentsResponse = await dialogflow.projects.agent.search({
    parent: `projects/-/locations/${location}`
  })
} catch (e) {
  throw e
  // receive the 400 error mentioned above
}

body {
  background-color: beige
}

.item {
  width: 50%;
  position: relative;
  left: 5rem;
  top: 2rem;
  filter: grayscale(100%);
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}

.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}

.polaroid>img {
  max-width: 100%;
  height: auto;
}

.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}

.item .polaroid:before {
  height: 20%;
  width: 47%;
  bottom: 0px;
  box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}

.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 75%;
  bottom: 0%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  transition: all 0.35s;
}

Answer 1

考虑使其可聚焦。它不会通过按下它来切换，但它仍然会按照用户的期望表现自然，并且会更容易添加。

您可以通过在 HTML 标记中将 tabindex="0" 添加到 .item 来实现。然后替换两行：

.item:hover {

.item:hover .polaroid:before {

与

.item:hover, .item:focus {

.item:hover .polaroid:before, .item:focus .polaroid:before {

这也会在它聚焦时应用效果。您可能想要添加

outline: none

在 .item:hover, .item:focus 类中移除焦点上的黑色轮廓。

您的最终结果可能是：

body {
  background-color: beige
}

.item {
  width: 50%;
  position: relative;
  left: 5rem;
  top: 2rem;
  filter: grayscale(100%);
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}

.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}

.polaroid>img {
  max-width: 100%;
  height: auto;
}

.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}

.item .polaroid:before {
  height: 20%;
  width: 47%;
  bottom: 0px;
  box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item:hover, .item:focus {
  outline: none;
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}

.item:hover .polaroid:before, .item:focus .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 75%;
  bottom: 0%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  transition: all 0.35s;
}

<div class="item" tabindex="0">
  <div class="polaroid">
    <img src="https://i.imgur.com/5YVg9Ru.jpg" />
  </div>
</div>

如果您想要切换，则需要使用 JS。我只是在点击时从元素中添加和删除 active 类，然后使用它代替事件。

我删除了悬停效果，以便您可以在 PC 上更好地看到它。

function toggleClass(ele, className) {
  if (ele.classList.contains(className)) {
    ele.classList.remove(className);
  } else {
    ele.classList.add(className);
  }
}

body {
  background-color: beige
}

.item {
  width: 50%;
  position: relative;
  left: 5rem;
  top: 2rem;
  filter: grayscale(100%);
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}

.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}

.polaroid>img {
  max-width: 100%;
  height: auto;
}

.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}

.item .polaroid:before {
  height: 20%;
  width: 47%;
  bottom: 0px;
  box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.item.active {
  outline: none;
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}

.item.active .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 75%;
  bottom: 0%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  transition: all 0.35s;
}

<div class="item" onclick="toggleClass(this, 'active')">
  <div class="polaroid">
    <img src="https://i.imgur.com/5YVg9Ru.jpg" />
  </div>
</div>

我在桌面上有一个很好的图像悬停效果，但它在移动设备上悬停（包括 Codepen）

1 个答案: