Есть 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');
}
});
};
