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

Question

[oelena]

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

var location = targetX.getBoundingClientRect(); - этот элемент показывает позицию маленького квадрата (смотрела в консоли). А вот как вычислять позицию большого относительно него, что то не могу разобраться.

Answer 1

[MagicMight]

Comments

[oelena]

Благодарю, немного поменяв положение - расположила по центру внизу так как мне и надо - https://jsfiddle.net/ElenaOr/Luchx79s/12/

Answer 2

[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() - Возращает обьект свойств

Comments

[oelena]

спасибо - прочитаю внимательнее про getBoundingClientRect().