Держите Spolier ответ, показывающий после перемещения мыши. - PullRequest
Новая
       3

Держите Spolier ответ, показывающий после перемещения мыши.

0 голосов
/ 28 апреля 2018

Я пытаюсь составить базовый FAQ, используя простой щелчок на элементе, чтобы раскрыть ответ на FAQ. Спойлер.. Я нашел очень удобный фрагмент кода, но все, что я пытаюсь сделать, не может помешать зависанию мыши заставить ответ исчезнуть. Мне нужно, чтобы ответ оставался на странице, пока пользователь не будет готов нажать следующий FAQ.

Я надеюсь, что кто-то может помочь, большое спасибо. 

<!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/

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Вы можете дать код, это решение JavaScript, в JSFiddle go. 

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
0 голосов
/ 28 апреля 2018

Детали HTML и сводные элементы идеально подходят для этого. Основы без каких-либо CSS требуется: 

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

JSFiddle demo

...