用户选择不适用于 a:visited

jDogg 发表于 Dev

JDogg

我在一个数学网站上工作，它有一些练习，页面底部有解决方案。我想让解决方案在用户滚动时隐藏，并且需要单击块以显示答案。我想仅使用 css 和 html 来实现这一点。这是我到目前为止所做的：

HTML：

<div class="solution s1">
  <a href="#s1">2+2=4</a>
</div>

CSS：

.solution {
  width:80%;
  margin:25px auto;
}

.solution a:visited{
  color:black;
  background-color:white;
  user-select:text;
}

.solution a{
  background-color:#49FF59;
  display:block;
  width:100%;
  padding:25px;
  text-align:center;
  color:#49FF59;
  text-decoration:none;
  user-select: none;
}

除了用户选择之外，此代码效果很好。我想要它，以便用户无法在单击块之前复制解决方案。但是a:visited不会应用user-select:text;我试图添加更多类，但我无法修复它。请记住，大多数 CSS 都是用于星号的。

罗伯特·韦德

如果我是对的，那么您尝试采取的方法是防止某人因突出显示文本而进行全选并在屏幕上看到解决方案。

如果是这种情况，则可以使用更好的样式属性，特别是visibilityor display。

例如，您可以使用visibility: hidden或display: none隐藏解决方案，直到满足特定条件。

我还建议不要使用这样:visited的东西，除非你对每个你打算覆盖的问题都有特定的网址（如果你使用 href='#'），那么一旦你点击一个，它们都会被“访问” ）。使用:visited.

例如，您可以将容器更改为可点击元素，并使用隐藏您的内容visibility，然后在:active状态而不是状态上显示答案:visited。这将在按下鼠标按钮时显示答案。在正常情况下，文本是不可选择的，因为它是隐藏的。如果您想在点击后保持显示但不使用，:visited您将需要一个 javascript 解决方案。

值得一提的是，此解决方案不会在源代码中隐藏答案，但正如您上面提到的，这不是您关心的问题。

.solution {
  width:80%;
  margin:25px auto;
  background-color:#49FF59;
  display:block;
  width:100%;
  padding:25px;
  text-align:center;
}

.solution:active {
  color:black;
  background-color:white;
  user-select:text;
}

.solution:active a {
  color:black;
  background-color:white;
  visibility:visible;
}

.solution a{
  text-align:center;
  text-decoration:none;
  visibility: hidden;
}

<div class="solution s1">
  <a href="#s1">2+2=4</a>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-06-18

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章