Как сделать hover для пункта списка?

Question

[Jecob Holus]

У горизонтального списка есть нижняя рамка. Я хочу чтобы когда наводишь курсор на один из пунктов списка, эта рамка меняла цвет именно под этим пунктом, а не под всем списком. Как это сделать?

Задать эту рамку элементам списка, а не самому списку, я не могу по той причине, что тогда эта рамка будет штрихованая(под каждым элементом списка отдельная рамка), а не сплошная на весь список целиком.

Comments

[Dima Polos]

li:hover

[Dima Polos]

Можно хоть примерно о чем речь?

[Jecob Holus]

Dima Polos, очередной клоун?

[Dima Polos]

Jecob Holus, похож на клоуна? я не понял, о чем Вы пишите

Answer 1

[approximate solution]

У горизонтального списка есть нижняя рамка. Я хочу чтобы когда наводить курсор на один из пунктов писка, эта рамка меняла цвет именно под этим пунктом, а не подо всем списком. Как это сделать?

Сделать велосипед, задать нужному элементу списка псевдоэлемент after, который будет перекрывать вашу рамку чем-нибудь симпатичным. Допустим рамка серая, псевдоэлемент красный, толщина всевдоэлемента равна толщине рамки, сдвигаете её на уровень рамки, и при наведении показываете, она перекрывает = profit.

Comments

[Jecob Holus]

Я так не хочу

[approximate solution]

Jecob Holus, Тогда верстайте всё не через задницу, а продумавая UI\UX проекта, обычно это делается заранее, либо собирается из заранее выбранных gist

[Dima Polos]

Jecob Holus, аргумент

Answer 2

[Тимофей Маврин]

Вот мой вариант с использованием JS (jQuery).
Может быть много лишнего, т.к. старался очень быстро переписать с SCSS на CSS, не судите строго :)