Почему не работает hover?

Question

[Ankozar]

Есть span в div1.
Также в этом div1 есть div2, скрытый.
При наведении курсора на span, div2 показывается. Он позиционирован ниже div1, не перекрывает родителя.

Нужно чтобы текст в span менял цвет при наведении.

Hover в div1 работает, но действует также на все элементы div2, что не нужно.
Hover в span почему-то не работает. При этом параметр cursor:pointer в span работает.

То есть, наведение мыши на span ловится нормально. Но hover его цвет почему-то не меняет.

В чём подвох?

<div class='category-div'>
    <span class='branded-text category-div__branded-text'>
        Категории
    </span> 
    <div class='category-div__list_desktop'>
        <button class='category-div__close' value='Закрыть'>Закрыть</button>
    </div>
</div>

.category-div {
    position:relative;
    display: grid;
    grid-template-rows: auto;
    grid-gap: 1vmin;
    z-index: 1;

    .branded-text{
        cursor: pointer;
        & :hover {
            color: coral;
        }
    }
.category-div__list_desktop{
    position: absolute;
    display:grid;
    top: 100%;
    left: 0;
}
}

function categoryChangeUiMouseMove () {
    $('.category-div__branded-text').mouseenter(function(){
        if(window.matchMedia('(orientation: landscape)').matches){
        fadein = setTimeout(()=>{
        $('.category-div__list').fadeIn('medium')
        $('.category-div__list').css('display', 'grid')
        }, 300);
    }       
    })
    $('.category-div').mouseleave(()=>{
        if(window.matchMedia('(orientation: landscape)').matches){
            clearTimeout(fadein);
            $('.category-div__list').fadeOut('medium');
        }
    });

};

Comments

[Ankhena]

Самый простой способ понять в чем дело - открыть скомпилированный css.
Ну или инструменты разработчика.

& :hover скомпилируется в .category-div .branded-text :hover
а вам нужно .branded-text:hover
т.е. пробел лишний.
И такая вложенность скорее всего тоже чересчур.

[Ankozar]

Ankhena, тьфу, точно.... Я просто пропустил этот нюанс, видимо.... И в инструментах проглядел... Поправил, спасибо!

Answer 1

[Fadeevw]

&:hover {
     color: coral;
}

&:hover - необходимо писать без пробела