-1

document.getElementById("mydiv").onmousemove = function(e){
 img = document.getElementById("myimg");
 img.style.top = e.clientY+"px";
 img.style.left = e.clientX+"px";
}
#mydiv {
  position: relative;
  background-color: #212121;
  width: 500px;
  height: 500px;
  z-index: 5;
  cursor: pointer;
}

#myimg {
  position: relative;
  z-index: 4;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #e91e63;
}
<div id="mydiv">
  <div id="myimg"></div>
</div>

Коллеги, нужно соорудить подобный эффект при ховере на jQuery или JS. Нужно чтобы кружочек двигался с курсором в пределах каждого отдельного блока:

введите сюда описание изображения

3
  • покажите пример того что у вас получилось?
    – Randall
    13 апр 2018 в 11:08
  • А ничего у меня не получилось. Я даже не знаю в какую сторону копать, так как не силен в скрипте, мягко говоря. Мне бы библиотеку какую подрубить и было бы отлично.
    – Frigoris
    13 апр 2018 в 11:41
  • Добавил код. Я так понимаю нужно рисовать псевдоэлемент и/или еще одну обертку квадрату, чтобы круг залез под него? И как прибить курсор к центру круга?
    – Frigoris
    13 апр 2018 в 12:08

1 ответ 1

1

Не очень понятно, что именно Вам нужно. Но на основе того, что я увидел на скрине сделал вот такое)

var item = document.getElementsByClassName("item");
var circle = document.getElementById("circle");
for (var i = 0; i < item.length; i++) {
  item[i].addEventListener("mousemove", function(e) {
    x = e.layerX - 40;
    y = e.layerY - 40;
    circle.style.left = x + "px";
    circle.style.top = y + "px";
  });
}
#menu {
  height: 40px;
  font-size: 0;
  position: relative;
  margin: 20px;
}

.item {
  display: inline-block;
  width: 100px;
  height: 40px;
  color: white;
  font-size: 14px;
  text-align: center;
  background-color: rgba(0, 0, 0, .72);
  line-height: 40px;
  cursor: pointer;
}

#circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: tomato;
  position: absolute;
  top: -20px;
  z-index: -1;
}
<div id="menu">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div id="circle"></div>
</div>

1
  • Супер! То что надо, спасибо!
    – Frigoris
    13 апр 2018 в 12:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.