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 that you have read and understand our privacy policy and code of conduct.

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