0

На странице есть много блоков <pre>текст</pre>. Нужен скрипт, который при наведении курсора мыши и если дотронуться пальцем до блока, внутри блока pre активировалась кнопка HTML.

Вот так:

<pre><button data-clipboard-target="pre">Copy</button>текс</pre>

Это нужно чтобы не создавать для каждого блока id или класс, и кнопку под них.

1
  • Попробовал метод <pre onmouseover="mOver(this)" onmouseout="mOut(this)", а innerHTML='<button data-clipboard-target="pre">' Но происходит замена, так не нужно конечно. P.S. jQury не подключаю, он здесь не нужен.
    – Viher
    25 фев 2017 в 11:53

1 ответ 1

1

Вот работающий скрипт.

$(document).ready(function() {
  $('pre').hover(
    function() {
      $(this).prepend('<button data-clipboard-target="pre">Copy</button>');
    },
    function() {
      $('pre button').remove();
    }
  );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>
<pre>текст</pre>

5
  • Есть решение на чистом JavaScript?
    – Viher
    25 фев 2017 в 14:52
  • Вы можете переписать это на чистый js - код понятен по сути. 25 фев 2017 в 14:55
  • В js hover и функция prepend по другому работают. ВОПРОС ОТКРЫТ.
    – Viher
    26 фев 2017 в 7:45
  • А что за командный тон? Я никому ничего не должен. 26 фев 2017 в 8:24
  • Нет нет, даже в мыслях не было. Спасибо за код. Скрипт Я написал, такие вещи нужно знать event.target.insertAdjacentHTML('afterbegin', '<button>Copy</button>');
    – Viher
    27 фев 2017 в 14:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.