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

На десктопе :hover срабатывает при наведении курсора, а на мобильных устройствах — при касании элемента. Однако есть нюансы:

1. На мобильных :hover может остаться активным после касания (пока пользователь не коснётся другого элемента)
2. Для лучшей поддержки мобильных устройств часто используют комбинацию с :active или :focus

Пример:

.button:hover, .button:active {
  background: blue;
}

Лучше использовать медиазапросы @media (hover: hover) для разделения логики:

@media (hover: hover) {
  /* Стили только для устройств с поддержкой hover */
  .button:hover {
    background: blue;
  }
}