Свойство CSS, курсор: указатель, работает при определенной ширине окна, а при другом исчезает - PullRequest
Новая
       18

Свойство CSS, курсор: указатель, работает при определенной ширине окна, а при другом исчезает

0 голосов
/ 14 сентября 2018

Значение #toggle (div) должно быть cursor:pointer, а переключатель должен отображаться в диапазоне от 0 до - 877 пикселей (ширина экрана).

Переключатель работает, он отображается в диапазоне от 0 до 877 пикселей,также свойство cursor:pointer работает от ширины 427 пикселей до ширины 877 пикселей.Но с минимума - 426 пикселей, курсор: указатель не работает.

В чем проблема? `

Мой код: 

#toggle {
  float: right;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10%;
  visibility: hidden;
  cursor: pointer;
}

#toggle .line {
  width: 100%;
  height: 3px;
  background-color: #000;
  margin: 3px auto;
}

#toggle.on #one {
  transform: rotate(45deg) translateX(1px) translateY(5px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(5px) translateY(-9px);
}

@media screen and (max-width: 877px) {
  ul {
    display: none;
  }
  #toggle {
    visibility: visible;
    opacity: 1;
    cursor: pointer;
  }
}
<nav>

  <div id="wrapper">

    <div id="toggle">
      <div id="one" class="line"> </div>
      <div id="two" class="line"> </div>
      <div id="third" class="line"> </div>

    </div>

    <div class="logo">
      <h2> Navbar </h2>
    </div>

    <ul>
      <li><a href="#"> Home </a></li>
      <li><a href="#"> About </a></li>
      <li><a href="#"> Pricings </a></li>
      <li><a href="#"> Blog </a></li>
      <li><a href="#" class="exclusive"> Contact </a></li>
    </ul>
  </div>
</nav>

<div id="#content">

</div>
...