Deixar em evidencia dois ou mais elemento em um mouseenter

Olá, Gabriel.

Você pode adicionar o código que você já vez para eu dar uma olhada?

Segue meu codigo Marco.

esse é meu icone do carrinho:

<div class="navegacao-usuario">
    <div class="carrinho">
    <span class="icon-cart2"></span>

    <h2 class="titulo-carrinho">
        meu  carrinho(${pedido.quantidade})
    </h2>
</div>

css:

.carrinho{
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1em;    
}

e esse e o meu carrinho :

<div class="car-user">
                <div class="title-car-user">
                    <p>Meu carrinho</p>
                </div>

                <c:forEach var="prod" items="${pedidoItem}">
                    <div class="prod-car-user">
                        <img src="<c:url value="/${prod.produto.path}"/>">
                        <p>
                            ${prod.produto.descricao} <br>

                            Quantidade: ${pedido.getQuantidade(prod)}
                        </p>
                        <div class="value-car-item">R$ ${pedido.getTotalItem(prod) }</div>                         
                    </div>
                </c:forEach>
                <div class="closed-request-user">
                    <div class="delivery-request">
                        Total(valor sem frete): <strong class="value-delivery">R$ ${pedido.getTotal()}</strong>
                    </div>

                    <div class="button-closed-request">
                        <a href="/rprvidros/carrinho/detalhe">Ver meu carrinho</a>

                        <form action="/rprvidros/confirmacao" method="post">
                            <button class="button-closed" type="submit">
                                Fechar pedido
                            </button>
                            <input type="hidden" name="${_csrf.parameterName }" value="${_csrf.token }"  required/>
                        </form>    
                    </div>
                </div>

            </div>

css:

.car-user{
    background-color: white;
    width: 22em;
    position: absolute;
    right: 21%;
    top: 51%;
    display: flex;
    flex-flow: column;
    display: none;
}

quando tenho o evento mouseenter tenho esse codigo jquery:

var show = function(){
    $(".car-user").fadeIn().addClass("car-fix");
    $(".icon-cart2").fadeIn().addClass("car-fix");
    $(".titulo-carrinho").fadeIn().addClass("car-fix");
}

$(".carrinho").on('mouseenter',show).on('mouseleave',remove);

so que o ocorre é que minha div car-user ela fica com o efeito desejavel, mas meu icone e meu titulo não, só quando eu tiro o mouse da div car-user, ai ele aplica mas nao e nesses dois elementos.

não sei se fui muito claro, mas obrigado pela atenão

desculpe esqueci de mandar a ultima classe CSS:

.car-fix{
    display: flex;
    box-shadow: 0 0 0 99999px rgba(0,0,0,.8);
}