Question

我试图通过简单点击元素来制作基本常见问题解答，以揭示常见问题解答的答案。扰流板.. 我发现了一个非常方便的编码，但我尝试的一切都无法防止鼠标悬停使答案消失。我需要答案留在页面上，直到用户准备点击下一个常见问题解答。

我希望有人可以提供帮助，非常感谢你。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>

.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }

https://jsfiddle.net/g9b3ugzh/

Answer 1

HTML详细信息和摘要元素非常适合这种情况。没有任何CSS要求的基础知识如下：

<details>
    <summary>Answer:</summary>
    <p>My hidden text</p>
</details>

JSFiddle demo

Answer 2

您可以在JSFiddle a go。

中提供代码，它是一个JavaScript解决方案

var spoiler = document.getElementsByClassName('spoiler');

  var showSpoiler = function() {
    this.classList.add("show-spoiler");
  }

  for (var i = 0; i < spoiler.length; i++) {
    spoiler[i].addEventListener("mouseover", showSpoiler);
  }

虽然也要禁用和修改一些CSS，以使其工作：

从position: absolute;

.spoiler:before

从top

.spoiler > div

删除了:hover

:active

.spoiler

鼠标移动后保持更明显的答案。

2 个答案: