@Ankozar

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

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

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

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

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

В чём подвох?

607de8151e214894820075.png

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

};
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Fadeevw
&:hover {
     color: coral;
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы