@oelena

Как менять положение элемента относительно наведения курсора мыши на другие элементы?

https://jsfiddle.net/ElenaOr/Luchx79s/1/ - не могу понять, как правильно записать на чистом js чтоб большой элемент позиционировался под маленькими элементами в момент когда наводим на маленький элемент курсор.

var location = targetX.getBoundingClientRect(); - этот элемент показывает позицию маленького квадрата (смотрела в консоли). А вот как вычислять позицию большого относительно него, что то не могу разобраться.
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
@MagicMight
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@drawnofmymind
var colorsBig = document.querySelector('.big-color');
var colorsElements = document.querySelectorAll('ul li');

for(var colorElement of colorsElements) {
	colorElement.onmouseenter = function(event) {
		colorsBig.classList.remove('hidden');
		var targetX = event.target;
		var location = targetX.getBoundingClientRect().x;
    colorsBig.style.left = location + 'px'
	}
	colorElement.onmouseleave = function() {
		colorsBig.classList.add('hidden');
	}
}

(спозиционирован относительно x-оси)

getBoundingClientRect() - Возращает обьект свойств
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы