Как реализовать появление кнопок «отправить» и т.д. при наведении на картинку

PushustuiKotik

New Member
Регистрация
14.05.2020
Сообщения
2
Доброго времени суток! Я начинающий верстальщик. Верстаю по макетам. Возник вопрос как при наведении на картинку реализовать появление этих кнопок? (То есть как добавить сами иконки понятно), но как сделать их функциональными? Чтобы действительно можно было скопировать ссылку/поставить лайк. Нужен ли js? Можно ли реализовать это на плагине? Всем спасибо!
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
3 991
Да, обязательно нужен JS.
Что подразумевается по плагином?

Готовая функция выглядит примерно так
JavaScript:
function copyContent(text){
    const input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.opacity = 0;
    input.value = text;
    document.body.appendChild(input);
    input.select();
    let result =  document.execCommand('Copy', false, null);
    document.body.removeChild(input);
    return result;
}
В эту функцию передаём необходимый текст и он копируется в буфер
Для вашей кнопочки он получится примерно вот так (самый простой вариант)
HTML:
<span onclick="copyContent('ссылка')"></span>
Для просмотра ссылки необходимо: Войти или Регистрация
Конечно можно добавить всякие уведомления типа "скопировано", но это на данном этапе усложнит функцию.
 

PushustuiKotik

New Member
Регистрация
14.05.2020
Сообщения
2
Да, обязательно нужен JS.
Что подразумевается по плагином?

Готовая функция выглядит примерно так
JavaScript:
function copyContent(text){
    const input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.opacity = 0;
    input.value = text;
    document.body.appendChild(input);
    input.select();
    let result =  document.execCommand('Copy', false, null);
    document.body.removeChild(input);
    return result;
}
В эту функцию передаём необходимый текст и он копируется в буфер
Для вашей кнопочки он получится примерно вот так (самый простой вариант)
HTML:
<span onclick="copyContent('ссылка')"></span>
Для просмотра ссылки необходимо: Войти или Регистрация
Конечно можно добавить всякие уведомления типа "скопировано", но это на данном этапе усложнит функцию.
Спасибо огромное!
 
Верх Низ