Активировать при наведении курсора

386

26 февраля 2017, 10:08

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

Вот так:

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

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

Answer 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>