Question

我正在开设一个数学网站，并且在网页底部有一些解决方案。我想制作这样的解决方案，当用户滚动时隐藏它们，并且需要点击块来显示答案。我想只使用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都是针对星号的。

Answer 1

如果我更正，那么您尝试采取的方法是阻止某人选择所有内容并在屏幕上看到解决方案，因为文字会突出显示。

如果是这种情况，可以使用更好的样式属性，尤其是visibility或display。

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

我还建议不要使用:visited这样的内容，除非您为每个要覆盖的问题设置了特定的网址（如果您使用href =＆＃39;＃＆＃39; ）对于一切，然后一旦你点击一个，他们都被访问了＃39;）。使用:visited时，您也会遇到浏览器缓存问题。

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

值得声明此解决方案不会隐藏源代码中的答案，但正如您在上面提到的那样，您不需要担心。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

用户选择不工作：访问

HTML：

CSS：

1 个答案: