需要帮助才能在用户在页面中时激活菜单上的悬停效果

问：

所以我有一个网站标题菜单，还有一个小的 css 悬停效果，可以更改字体颜色并在文本下方创建一个绿色小条，但是当用户在与“a”标签关联的页面上时，我需要这种效果保持打开状态。

`<nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="<?php echo get_template_directory_uri(); ?>/home"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo-header.png" class="logo-header" alt=""></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/barra-de-menu.png" class="menu" alt="" loading="lazy">
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <?php
                        function is_page_active($page_slug) {
                            global $post;
                            return is_page($page_slug) || (is_singular() && get_post_field('post_name', $post) === $page_slug);
                        }
                    ?>
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item<?php echo is_page_active('home') ? 'active' : ''; ?>">
                            <a class="nav-link nav-efeito" href="<?php echo get_template_directory_uri(); ?>/home">Início</a>
                        </li>
                        <li class="nav-item<?php echo is_page_active('sobre-nos') ? 'active' : ''; ?>">
                            <a class="nav-link nav-efeito" href="<?php echo get_template_directory_uri(); ?>/sobre-nos">Sobre</a>
                        </li>
                        <li class="nav-item<?php echo is_page_active('empreendimentos') ? 'active' : ''; ?>">
                            <a class="nav-link nav-efeito" href="<?php echo get_template_directory_uri(); ?>/empreendimentos">Empreendimentos</a>
                        </li>
                        <li class="nav-item<?php echo is_page_active('blog') ? 'active' : ''; ?>">
                            <a class="nav-link nav-efeito" href="<?php echo get_template_directory_uri(); ?>/blog">Blog</a>
                        </li>
                        <li class="nav-item<?php echo is_page_active('fale-conosco') ? 'active' : ''; ?>">
                            <a class="nav-link nav-efeito" href="<?php echo get_template_directory_uri(); ?>/fale-conosco">Contato</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link nav-efeito" href="/">Corretores</a>
                        </li> -->
                    </ul>
                    <ul class="centralizar-meio ms-auto m-0">
                        <li>
                            <a href="<?php echo get_template_directory_uri(); ?>/portal-do-cliente" class="btn-portalCliente">Portal do Cliente</a>
                        </li>
                        <li>
                            <a href="<?php the_field('link_area_do_cliente', 8) ?>" class="btn-areaCorretor">Área do Corretor</a>
                        </li>
                        <li>
                            <a href="<?php echo get_template_directory_uri(); ?>/vamos-conversar" class="">
                                <div class="centralVendas">
                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/fone-1.png" alt="" loading="lazy">
                                    <div class="infCentralVendas">
                                        <p class="textcentralVenda">CENTRAL DE VENDAS</p>
                                        <p class="foneCentralVendas"><?php the_field('telefone_central_de_vendas', 8) ?></p> 
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>`