Как изменить цвет объекта при наведении мыши?

Question

[Денис Юламанов]

Необходимо сделать изменение цвета блока в зависимости от положения мыши. Если мышка стоит по середине, то весь блок что находится слева от позиции мыши меняет цвет на необходимую. Или не меняет цвет, а сокращает изображения.

Необходимо для создания рейтинга.

Comments

[Клим шерстяников]

mousemove.просто каждый раз записывай предыдущее значение и сравнивай

Answer 1

[Rustam Bainazarov]

Можно без JS так сделать:



Ну как без JS... там по клику надо будет получать нужный рейтинг.

Comments

[Денис Юламанов]

Интересный вариант! Благодарю!)

Answer 2

[Александр Епихин]

Можно сделать без JS так

Comments

[iTemes]

только заморачиваться с order у каждого спана не обязательно, просто делаешь flex-direction: row-reverse; для контейнера и все)

[Александр Епихин]

iTemes, спасибо. Согласен. Нашел еще такой способ

Answer 3

[Олег]

Comments

[Денис Юламанов]

А что если мне необходимо поместить блок где то в другом месте? Когда меняю позицию, все ломается...

Answer 4

[Алексей]

Определите координаты блока и отслеживайте координаты мыши. В зависимости от этого встройте нужную логику

Answer 5

[xmoonlight]

Несколько блоков в ряд и по наведению на блок (onhover), меняем у него стиль: left:0px и смену цвета.
Будет эффект шкалы, реагирующей на "мышь".
Можно вообще без js обойтись, если сделать стилизацию селектора.