: фокус на ссылках не работает в мобильной версии моего сайта

#css #mobile #focus #pseudo-class

#css #Мобильный #фокус #псевдокласс

Вопрос:

У меня есть меню занавеса в мобильной версии моего сайта, и я хотел, чтобы его ссылки менялись с белого на зеленый при нажатии. Для этого я использовал: фокус на элементах в CSS и даже попытался добавить tabindex=»1″ в HTML, но происходит следующее: когда я тестирую мобильную версию на своем ноутбуке с помощью инструмента проверки, ссылки на самом деле имеют желаемый эффект фокусировки; однакокогда я тестирую это на реальном мобильном телефоне, ничего не происходит — ссылки просто сохраняют свой первоначальный белый цвет.

Кто-нибудь может помочь, основываясь на коде, который я оставляю ниже? Это звучит как что-то, что должно быть легко решить, но я перепробовал миллионы решений, предложенных в Интернете, и до сих пор ничего не получалось: ( Заранее спасибо!

 body {
  background-color: black;
}

.overlay a {
  color: white;
}

.overlay a[tabindex]:focus {
  color: green;
  outline: none;
}

 <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">amp;times;</a>
  <div class="overlay-content">
    <a tabindex="1" href="#">Home</a>
    <a tabindex="1" href="#">About</a>
    <a tabindex="1" href="#">Contact</a>
    <a tabindex="1" href="#">CV</a>
  </div>
</div>

Развернуть фрагмент

1. :focus не является селектором ссылок. Селекторами ссылок являются :visited , :hover и :active . Также не работает вложенный css. для этого вам нужен SASS в качестве примера.

2. Спасибо, @tacoshy — я тоже пробовал: active, но по какой-то причине, похоже, не работает ни в рабочей, ни в рабочей среде (хотя он работает локально). Есть предложения?

3. чего именно вы пытаетесь достичь? Если он работает локально, то он должен работать правильно. Вы уже очистили кеш браузера? Вы убедились, что правильный css загружен в веб-пространство?

4. Я только что понял, что псевдоклассы на мобильных устройствах работают в Mozilla, но не в Chrome или Safari. Я добавил -webkit- до моих правил CSS, но он по-прежнему не работает. Какие-либо дополнительные советы? Спасибо!

Ответ №1:

В вашем случае :active должно работать в мобильной версии. :focus используется для input тегов.