Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2019, 16:46
Интересующийся
Отправить личное сообщение для XamMax Посмотреть профиль Найти все сообщения от XamMax
 
Регистрация: 20.06.2018
Сообщений: 12

Следование HTML-объекта за курсором
Подскажите, как на нативном js написать небольшой скрипт.

Нужно чтобы следом за курсором двигался div
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2019, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

вслед за курсором
XamMax,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
      /* Задаем фон SVG */
svg {
  background: #AB1;

}

/* Меняем цвет path при наведнии на него */
.hov path:hover {

  fill: #00FFA9 !important;
  stroke: none;
  stroke-width: 1px !important;
  transition: all .1s;

}


/* Стили для подсказки */
.tooltip {
  position: absolute;
  top: -200px;
  color: #000;
  border-radius: 10px;
  background: #FFDD00;
  padding: 20px;
  box-shadow: 0px 0px 23px 0px rgba(0,34,252,1);
  transition: .3s;
  transform: scale(0);
}
body {
    position: relative;
}
.hov{
    margin-top: 300px;
}

</style>

<script>
    window.onload=function(){
      const tooltip = document.querySelector('.tooltip');
      [...document.querySelectorAll( '.hov' )].forEach(  el => {
      el.addEventListener( 'mousemove', ({target, clientX, clientY})=> {
        const {top,left} = el.getBoundingClientRect();
   	  if(target.closest('path')){
        tooltip.innerHTML = target.getAttribute('title');
        tooltip.style.transform = 'scale(1)'
        tooltip.style.top = (clientY - top)+'px' ;
        tooltip.style.left = (clientX - left)+'px'
   	  }
      }
       );
      el.addEventListener( 'mouseout', function() {
           tooltip.style.transform = '' ;
      } );
    } );
  }
</script>

</head>
<body>
      <div class="hov">
      <svg width="800" fill="#ccc">

        <path fill="#000000" d="M172,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z" title="1"/>

        <path fill="#fa0000" d="M572,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z" title="2"/>

        <path fill="#fa85ef" d="M372,272c-57.333,69.333-114.667,69.333-172,0V0h172V172z" title="3"/>
    </svg>
</div>



    <div class="tooltip">Описание / Инфо</div>



</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение html тултипа rustleofstars Оффтопик 0 20.09.2018 14:00
Вызов скрипта через HTML и передача данных через HTML Rusy233 ms Javascript под браузер 0 11.08.2018 19:55
вывод сообщений со стены vk Радиойод Общие вопросы Javascript 0 15.11.2017 14:48
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
смешивание объекта и html bdfy1 ExtJS 1 08.06.2013 01:01