Задать стиль курсору

Question

Помогите, пожалуйста, с отображением стиля {cursor: pointer;}. При наведении курсора на блочные элементы со стилями menu-item и submenu курсор должен трансформироваться в указатель,а у меня ничего не работает. Прилагаю полный рабочий код:

    .fullscreen-bg {
    overflow: hidden;
    z-index: -100;
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 45%;
}

    .overlay {
    background: rgba(0,0,0,0);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

    .overlay2 {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 4;
}
    .fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
    p {
     text-align: center;
     padding-bottom: 250px;
     color: white;
}

    .tga {
     color: white;
     font-family: Bradley Hand, cursive;
     font-style: italic;
     item-align: centerS;
}

    .menu-item {
    color: white;
    border: 2px solid white;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 150px 12px 150px 12px;
    background-color: gray;
    font-family: New courier;
        cursor: pointer;
}

    .menu-item > .submenu{
    height: 40px;
    width: 100px;
    position: absolute;
    background-color: green;
  cursor: pointer;
}

<!DOCTYPE html>
<body>

<div class="fullscreen-bg">
<div class="nav overlay2">
    <div class="overlay">

<p>

<strong class="tga">

Hey Everyone! My name is blah-blah!<br>
I'm a beginer for web-development and web-design. I'd appreciate if you choose me as a designer for you project (even if my salary is marginally low).<br>
Because every job I will make will be my advantage in the future! 

</strong>

</p>

<hr />

<p>

    Learnin' JS with conscience

</p>

</div>

    <div class="menu-item">
         Контакты
            <div class="submenu">
                INSTAGRAM
                    <div class="submenu">VK
    </div></div></div>

    <div class="menu-item">
        Мое портфолио
            <div class="submenu">В процессе ;)
                </div></div>

</div>
    
    <video loop="" muted="" autoplay="" poster="video/plane.jpg" class="fullscreen-bg__video">
        <source src="https://sitehere.ru/examples/30.06.2015/video/plane.mp4" type="video/mp4">
        <source src="video/plane.webm" type="video/webm">
    </video>


</div>

</body>

Answer 1

За стиль элемента при наведении курсора мыши отвечает псевдокласс :hover

 .menu-item:hover {
    cursor: pointer;
  }

 .menu-item > .submenu:hover {
    cursor: pointer;
  }

И уберите z-index: -100; из fullscreen-bg

БЛОГ НА HUSL

Задать стиль курсору

Ответы (1 шт):