В чем разница между использованием hover на мобильном устройстве и на десктоп?

Hover на мобильных устройствах vs Десктоп

Главная разница: десктоп имеет указатель мыши (pointer), мобильные устройства работают через касание (touch). Это создает фундаментальные различия в UX и требует разных подходов.

Проблема на мобильных

На десктоп (CSS hover):

/* Стандартный hover эффект */
button:hover {
  background-color: #007bff;
  cursor: pointer;
}

На десктопе это работает отлично:

• Пользователь наводит мышку
• Появляется визуальный feedback
• Пользователь кликает

На мобильном (проблема):

/* Этот hover НЕ срабатывает на мобильных! */
button:hover {
  background-color: #007bff;
}

Проблемы:

• Нет :hover состояния - нечего наводить
• Состояние может "застревать" после первого касания
• На некоторых браузерах :hover срабатывает после первого касания
• UX непредсказуем

// Пример проблемы на мобильном
// Пользователь кликает на кнопку
// На Safari iOS `:hover` состояние может остаться активным
// До следующего клика в другое место

Технические причины

1. Нет концепции "hover" на touch devices

На мобильных есть только два состояния:

• Не касаемся - :not(:hover) / normal state
• Касаемся - :active / :focus state

Нет промежуточного "на гране" состояния.

/* На мобильном это не делает то что ты ожидаешь */
button:hover { /* Мобиль не знает что это */ }

button:active { /* Это работает - когда касаешься */ }

button:focus { /* Это тоже работает */ }

2. Разные браузеры обрабатывают по-разному

Chrome/Android: :hover не срабатывает вообще на touch Safari/iOS: :hover может срабатывать после первого касания Firefox: Varies по версии

Результат: непредсказуемое поведение

3. Касание требует выполнения действия

Применение :hover эффектов:

button:hover {
  /* На мобильном это может мешать клику */ 
  background: blue;
}

Пользователь касается для клика, но может сначала видеть hover эффект, что запутывает.

Решение 1: Медиа-запросы (Media Queries)

Определи устройство и используй разные стили:

/* Десктоп - используй hover */
@media (hover: hover) and (pointer: fine) {
  button:hover {
    background-color: #007bff;
    transform: scale(1.05);
    cursor: pointer;
  }
}

/* Мобильное - без hover */
@media (hover: none) and (pointer: coarse) {
  button:active {
    background-color: #007bff;
  }
  
  button {
    padding: 12px; /* Больше размер для касания */
  }
}

Поддержка браузерами: Chrome 41+, Firefox 64+, Safari 13+

Решение 2: JavaScript detection

Определи возможности устройства и добавь классы:

// Определи поддерживает ли устройство hover
const hasHover = () => {
  return window.matchMedia('(hover: hover)').matches;
};

const hasCoarsePointer = () => {
  return window.matchMedia('(pointer: coarse)').matches;
};

if (!hasHover()) {
  // Мобильное устройство
  document.documentElement.classList.add('touch-device');
  document.documentElement.classList.remove('hover-device');
} else {
  // Десктоп
  document.documentElement.classList.add('hover-device');
}

/* CSS использует классы */
.hover-device button:hover {
  background-color: #007bff;
}

.touch-device button:active {
  background-color: #007bff;
}

Решение 3: Touch events API

Обработай touch события отдельно:

const button = document.querySelector('button');

// Мобильные touch события
button.addEventListener('touchstart', () => {
  button.classList.add('touch-active');
});

button.addEventListener('touchend', () => {
  button.classList.remove('touch-active');
});

// Десктоп mouse события
button.addEventListener('mouseenter', () => {
  button.classList.add('hover-active');
});

button.addEventListener('mouseleave', () => {
  button.classList.remove('hover-active');
});

button.hover-active {
  background-color: #007bff;
  transform: scale(1.05);
}

button.touch-active {
  background-color: #0056b3; /* Другой цвет для касания */
  transform: scale(0.98); /* Down state */
}

Решение 4: React/Next.js подход

function Button({ children }: { children: React.ReactNode }) {
  const [isHovered, setIsHovered] = useState(false);
  const [isTouched, setIsTouched] = useState(false);
  const [hasPointerSupport] = useState(() => 
    window.matchMedia('(hover: hover)').matches
  );

  return (
    <button
      className={cn(
        'button',
        hasPointerSupport && isHovered && 'state-hover',
        isTouched && 'state-touch'
      )}
      onMouseEnter={() => hasPointerSupport && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onTouchStart={() => setIsTouched(true)}
      onTouchEnd={() => setIsTouched(false)}
    >
      {children}
    </button>
  );
}

.button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 200ms;
}

.button.state-hover {
  background-color: #007bff;
  transform: scale(1.05);
}

.button.state-touch {
  background-color: #0056b3;
  transform: scale(0.98);
}

Лучшие практики

1. Никогда не полагайся только на hover

/* Плохо - скрытое содержимое доступно только на hover */
.tooltip {
  display: none;
}
button:hover .tooltip {
  display: block; /* На мобильном невидимо! */
}

/* Хорошо - доступно через кнопку */
button.show-tooltip .tooltip {
  display: block;
}

2. Используй достаточный размер для касания

/* Минимум 44x44px для мобильного */
@media (pointer: coarse) {
  button {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* На десктоп может быть меньше */
@media (pointer: fine) {
  button {
    padding: 6px 12px;
  }
}

3. Не используй hover для критичного функционала

// Плохо - важная опция видна только на hover
function Menu() {
  return (
    <ul>
      <li>Option 1
        <ul className="submenu"> {/* Видна только на hover */}
          <li>Sub-option</li>
        </ul>
      </li>
    </ul>
  );
}

// Хорошо - всегда доступно, hover добавляет эффект
function Menu() {
  const [expanded, setExpanded] = useState(false);
  
  return (
    <ul>
      <li>
        <button onClick={() => setExpanded(!expanded)}>
          Option 1
        </button>
        {expanded && (
          <ul className="submenu">
            <li>Sub-option</li>
          </ul>
        )}
      </li>
    </ul>
  );
}

4. Тестируй на реальных устройствах

# Chrome DevTools
# Ctrl+Shift+M - включи mobile emulation
# Но помни - это не реальное устройство!

# Лучше: тестируй на реальном телефоне
# Используй remote debugging

Сравнение состояний

Итоговый чеклист

• Используй медиа-запросы (hover: hover) и (pointer: coarse)
• Не полагайся только на hover для функционала
• Минимум 44x44px для мобильных кнопок
• Обработай touch события отдельно от mouse
• Тестируй на реальных устройствах
• Предоставь альтернативу для мобильных (кнопка, меню)

Вывод

Hover - это десктоп-специфичное поведение. Мобильные устройства работают иначе и требуют отдельного подхода. Используй feature detection и предоставляй одинаковый функционал для обоих типов устройств.