Как сверстать такое меню?

Question

[Dark19]

Здравствуйте, подскажите как сверстать такое меню как на картинке?

У каждого пункта есть маркер, а при наведении цвет фона пункта меняется и маркер этого и соседнего пункта пропадает. Я задавал маркер как фон, но вот при наведении не знаю как спрятать соседний маркер?

Answer 1

[Никита К.]

Используйте сестренские селекторы
https://jsfiddle.net/bonilka/pkybw97m/2/
Тут в место точек, поставил звездочки "*", но суть надеюсь поймете.

Answer 2

[Николай Колесниченко]

Вот так можно: https://jsfiddle.net/Ldzttb2e/

.menu__link:after {
 ...
}

.menu__item:hover > .menu__link:after {
    display:none;
}

Comments

[Dark19]

я примерно так и сделал только через фоновое изображение, но там нужно чтобы оба маркера пропадали, тот что перед пунктом и тот что после

[Евгений Перин]

Dark19: :after и :before?

[Евгений Перин]

Dark19: сори, не так понял

Answer 3

[Дмитрий Ковальский]

К примеру - на события mouseover,mouseleave добавляйте или удаляйте кусочек разметки с этой точкой