Div показывает при наведении, но не на мобильный, используя активный - PullRequest
Новая
       14

Div показывает при наведении, но не на мобильный, используя активный

3 голосов
/ 13 апреля 2019

Итак, у меня есть несколько div, которые отображают больше информации о наведении.Я хочу распространить это на мобильный.Но так как на экранах телефонов нет парящих действий, я хочу адаптировать их для мобильных устройств.Я пробовал использовать: active, но это ничего не делает

ps:

Я предпочитаю использовать css для этого, но если нет способа сделать это, то решения JQuery приемлемы.

<div class="app">
   <i class="fa fa-adjust fa-3x"></i>
   <div class="app-text">App 1</div>
   <div>
      <ul class="hover-list">
         <li>first</li>
         <li>second</li>
         <li>third</li>
      </ul> 
   </div>
</div>

<div class="app">
   <i class="fa fa-anchor fa-3x"></i>
   <div class="app-text">App 2</div>
   <div>
      <ul class="hover-list">
         <li>first</li>
         <li>second</li>
         <li>third</li>
      </ul> 
   </div>
</div>

А вот стиль: 

.app:hover, .app:active { 
    transform: scale(1);
    background-color: #8a898a;
    border-radius: 10px;
    color: white;
}

.app:hover > i { color: white; }

.app:hover ul, .app:active ul { 
    display: block;
}

ОБНОВЛЕНИЕ

в соответствии с предложениями, вот что у меня сейчас есть: 

.app:hover, .app:active, .app:focus { 
    transform: scale(1);
    background-color: #8a898a;
    border-radius: 10px;
    color: white;
}

.app:hover > i,
.app:active > i, 
.app:focus > i { color: white; }

.app:hover ul, .app:active ul, .app:focus ul { 
    display: block;
}

Это работает в инструментах разработчика FireFox, но не в моем браузере телефона.Возможно ли переписать необходимые правила?Есть идеи как отладить?

...