Как бороться с запасами, когда нет возможности парить.

Автор оригинала: sheriffderek.

Появляется вроде работы на iOS, верно? Но … Это не совсем дизайнерское решение с вашей стороны. Apple пытается обнаружить парелку, а затем, когда вы прикасаетесь к нему/это добавляет состояние Hover … Но что, если эта то, что вы просто щелкнули была ссылка Отказ

Недавно я работал в крошечном проекте и потянул в визуальный дизайнерский друг: Джеймс Гамбоа чтобы увидеть, что он мог добавить.

Потому что я экстрасенс – Я догадался, что он хотел бы иметь состояние зависания для имени «проекта». Я был прав. Но как насчет телефонов? Я просто хотел, чтобы они были обычным видимым текстом в этом случае. У вас есть гораздо меньше внимания, когда вы оглядываетесь в ожидании ожидания, чтобы получить ваши волосы, и вы просматриваете некоторые сайты на вашем телефоне … На самом деле не наступит цели, чтобы предложить слишком много «визуального» опыта + . Чехлы на самом деле не работают …

Модерзр На самом деле отличный инструмент для проверки возможностей и контекста Brower, но иногда вам просто нужно проверить 1 вещь. Вот так, как вы можете вилить ваш стиль с небольшим количеством теста JavaScript для связи :

// JavaScript
'use strict';

if ('ontouchstart' in window || 'ontouch' in window) {
  document.body.classList.add('touch-device');
} else {
  document.body.classList.add('non-touch-device');
}

или же

// jQuery if you prefer
'use strict';

var $body = $('body');

if ('ontouchstart' in window || 'ontouch' in window) {
  $body.addClass('touch-device');
} else {
  $body.addClass('non-touch-device');
}

А потом что-то вроде это в твоей стиле:

body.touch-device {
  background: red;
    /* here maybe the overlay is in place */
}

body.non-touch-device {
  background: blue;
    /* here maybe has a :hover to activate an overlay */
}

JavaScript версия в кодепене + Отладка для телефона

Версия JQuery в кодепене + Отладка для телефона

Обновление: это не может быть новым … Но это было для меня новости – что я мог бы проверить наличие возможностей на курге с @media правило

@media(hover:hover) {
  /* hover stuff! *?
}

И если вам нравятся SCSS или что-то вроде этого (я думаю, что стилус довольно удивительный …) – Вы можете немного смешивать, как это:

@mixin hover-setup() {
  //
  @media(hover: hover) {
    @content;
  }
}


@mixin on-hover() {
  //
  @media(hover: hover) {
    &:hover {
      @content;
    }
  }
}

Тогда в своих стилях – используйте это так:

.item {
  color: red;
  key: value;
  @include hover-setup() {
    color: blue;
  }
  @include on-hover {
    background: green;
    color: black;
  }
}

Это немного больше работы … но у него есть некоторые добавленные преимущества для сенсорных времен отклика – и оно держит вещи красивыми и декларативными.

Стилус синтаксис может выглядеть немного очиститель – в зависимости от вашего вкуса:

.item
  padding: $pad
  hover-setup()
    opacity: .7 // don't want this as a defalt unless hovering, right?
  on-hover()
    transition: opacity .2s
    opacity: 1

Это кажется действительно ясно! Стандартные вещи … что-нибудь особенное для настройки навязчивых ситуациях (таких как непрозрачность: .5), а затем состояние Hover. Все аккуратно и ясно.:)

Хочешь поговорить об этом? Давайте получим сеанс:

@sheriffderek

……

Я работаю полный рабочий день – с вечным образованием на их новой учебной платформе. Проверьте это! Это безусловно, лучший способ выучить дизайн и разработок как минимум денег и самых быстрых результатов – и это действительно весело. Шутки в сторону .

→ https://perpetual.education

Бесплатные советы Сеансы: Нет прилагаемых струн – просто настоящий человек, который хочет помочь вам стать отличным дизайнером.