Показать сообщение отдельно
  #1 (permalink)  
Старый 05.02.2019, 16:12
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Создание объекта и плавное отображение на странице
Добрый день, подскажите как можно плавно отобразить блок на странице, предварительно создав его через JS.

Идея в том чтобы при наведении на ссылку создавался блок средствами JS, в котором должен отображаться адрес URL ссылки, все это я реализовал, но плавно отобразить блок не получается, как можно это сделать? по плану, все манипуляции нужно проводить с JS.
<a id="mylink" href="https://www.google.com.ua/?gws_rd=ssl">hover and you will see the url for this link</a>


let url = document.links.mylink.href;

let linkHover = document.links.mylink;

linkHover.onmouseenter = function () {
  divShow();
}

function divShow() {
  linkHover.style.position = 'relative';

  let div = document.createElement('div');

  div.style.position = 'absolute';
  div.style.padding = '20px';
  div.style.background = '#E7E4E2';
  div.style.color = '#000';
  div.style.bottom = '-85px';
  div.style.left = '0px';
  div.style.border = '1px solid #E4E1DF';
  div.style.borderRadius = '10px';
  div.style.boxShadow = '0 0 15px rgba(0,0,0,.1)';
  div.className = 'testDiv';

  div.innerHTML = url;

  linkHover.appendChild(div);

  linkHover.onmouseleave = function () {
    linkHover.removeChild(div);
  }
}
Ответить с цитированием