1

Делаю переключатель между табами (слайдами) через css. То есть, скрываю видимость input, задаю нужные стили label. Кликаю на него, и через селектор открывается нужный экран (вот так):

  input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
  }

  label {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;

    &:hover {
      h3 {
        color: $blue;
      }
    }
  }

  .tabs-section--neurology,
  .tabs-section--massage,
  .tabs-section--rheumatology {
    display: none;
  }
    
  #neurology-button:checked ~ .tabs-section--neurology,
  #massage-button:checked ~ .tabs-section--massage,
  #rheumatology-button:checked ~ .tabs-section--rheumatology {
    display: flex;
  }

При клике по label, фокус резко переносит пользователя на него. Если label и контент находятся в разных местах, то это сильно мешает, т.к. пользователь хочет посмотреть контент, а его буквально отрывает от контента к лейблу. Есть ли способ это исправить?

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.