Как сделать так, чтобы при наведении на одного элемента появлялся другой?

Question

[Сергей Бурдужа]

Добрый день.
Мне нужно сделать такой эффект как в менюшке справа https://www.euconsult.md/pervayaa

Вот моя разметка

.navigation#js-navigation
    .navigation__list
        li
            a(href="#js-reimbursabile") Финансы
            span.circle
        li
            a(href="#js-history") История
            span.circle
        li
            a(href="#js-footer") Контакты
            span.circle

После наведения на кружочек, появляется ссылка.
Но, потом при наведении на ссылки, кружочек с сылкой исчезают.

let navigationLi = $('#js-navigation li');
		navigationLi.on('mouseenter', function(){
			if(!$(this).hasClass('active')){
				$(this).find('a').addClass('active');
			}
		});

		navigationLi.on('mouseout', function(){
			if(!$(this).hasClass('active')){
				$(this).find('a').removeClass('active');
			}
		});

Проблема в том, что я повесил обработчик только на кружочек.
По-идее так и должно быть. Наводишь на кружочек, появляется ссылка, но наводишь на ссылку и все исчезает.

Подскажите, что я не учел?

Заранее благодарен.

Comments

[Eugene Chefranov]

почему бы это все не сделать на CSS?

[Сергей Бурдужа]

Eugene Chefranov, на css нужно связать с селектором ~ или + -

Answer 1

[Eugene Chefranov]

На CSS

Comments

[Сергей Бурдужа]

Спасибо, щас разберусь в коде.

[Eugene Chefranov]

Сергей Бурдужа, для более удобного контролирования, точки можете из псевдоэлементов вынести в спан

[Сергей Бурдужа]

Eugene Chefranov, Спасибо. Только вы прописал a:hove translate, а у меня не работает. Я переопределил. li:hove a translate.