There are many <pre>текст</pre> blocks on the page. You need a script that when you hover the mouse cursor and if you touch the block with your finger, the HTML button is activated inside the pre block.

Like this:

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

This is necessary not to create for each block id or class, and a button for them.

  • I tried the <pre onmouseover="mOver(this)" onmouseout="mOut(this)", а innerHTML='<button data-clipboard-target="pre">' But there is a replacement, so it’s not necessary of course. PS jQury do not connect, it is not needed. - Viher

1 answer 1

Here is a working script.

 $(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>

  • Is there a solution in pure javascript? - Viher
  • You can rewrite it to pure js - the code is clear as a matter of fact. - KAGG Design
  • In js hover and the prepend function work differently. QUESTION OPEN. - Viher
  • And what is the command tone? I do not owe anything to anyone. - KAGG Design
  • No, not even in thought. Thanks for the code. The script I wrote, such things need to know event.target.insertAdjacentHTML('afterbegin', '<button>Copy</button>'); - Viher