How to make it so that when you hover over one element, another appears?

Question

Regular Expressions

Good afternoon.
I need to make an effect like in the menu on the right https://www.euconsult.md/pervayaa

Here is my markup

.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

After hovering over the circle, a link appears.
But, then when you hover over the links, the circle with the link disappears.

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');
      }
    });

The problem is that I hung the handler only on the circle.
In theory, this is how it should be. You hover over the circle, a link appears, but you hover over the link and everything disappears.

Tell me what I did not take into account?

Thanks in advance.

Answer 1

I change (\d\d) to $1., but brackets are saved.

(\d\d)Try instead \((\d+)\).

Answer 2

I got it like this

var str="(01) [Ляпис Трубецкой] Золотая Антилопа";
var pattern='\\((\\d\\d)\\)\\s*([^\\]]+\\])\\s+([А-Яа-яA-Za-z]+\\s+[А-Яа-яA-Za-z]+)';
var match=str.match(pattern);
console.log(match[1]+"."+match[3]);

Answer 3

On CSS