Особенности работы со стилем hover

При разработке интерфейса веб-приложения важно позаботиться о том, чтобы оно правильно отображалось на всех типах устройств, включая телефоны, планшеты и телевизоры. В частности, нужно добиться корректного отображения подсветки элемента при наведении курсора мыши (hover) или перетаскивании.

Если при наведении курсора мыши элемент визуально изменяется, то точно так же он должен измениться при касании пальцем на touch устройстве. При отпускании пальца, элемент должен выглядеть так, как будто он в обычном состоянии. Исключение, если в стандарте не задано отдельного поведения при нажатии.

Также подсветку hover не надо отображать, когда перетаскивается ползунок в скролле или изменяется размер сайта в окне браузера.

Для решения описанной проблемы фреймворк Wasaby автоматически добавляет специальные CSS-классы для тега body. С их помощью вы можете определить какой тип управления используется в настоящий момент или выполняется ли перемещение элемента.

Управление через сенсорный экран или мышь

Классы ws-is-touch и ws-is-no-touch показывают идет ли в текущий момент управление с сенсорного экрана. Необходимы для элементов, которые должны использоваться в зависимости от типа управления.

.touchElement {
  display: none;
}
.ws-is-touch .touchElement {
  /* элемент виден только в тач режиме  */
  display: block;
}

Отображение для touch управления.

.mouseElement {
  display: none;
}
.ws-is-no-touch .mouseElement {
  /* элемент виден только в режиме управления мышью  */
  display: block;
}

Отображение для управления мышью.

Перемещение элемента способом drag'n'drop

Классы ws-is-drag и ws-is-no-drag — показывают идет ли в данный момент перемещение через drag'n'drop (только для Wasaby drag'n'drop). Могут использоваться для смены вида курсора.

Управление мышью без перемещения элемента

Класс ws-is-hover — это комбинация ws-is-no-touch и ws-is-no-drag. Он показывает, что в данный момент надо подсвечивать элементы по hover. Класс активен, когда идет управление мышью, но не происходит перетаскивание. При использовании псевдоселектора :hover в собственных стилях, его необходимо размещать под классом ws-is-hover.

.ws-is-hover .myControl:hover{
    background-color: red;
}