:hover на mouse, а :active на tach

Question

В Css возможно разделить, для курсора применяем hover, а при касании active?

Answer 1

для :hover - @media (hover: hover) and (pointer: fine) будет применяться для мыши

для :active - @media (hover: none) and (pointer: coarse) будет применяться при наведении пальца на сенсорном экране

pointer: fine используется для указателей, которые обладают высокой точностью, как мышь

pointer: coarse указывает на указатели с низкой точностью, такие как палец например

.my-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}


/* Стили для устройств с указателем мыши */

@media (hover: hover) and (pointer: fine) {
  .my-button:hover {
    background-color: red;
  }
}


/* Стили для сенсорных устройств */

@media (hover: none) and (pointer: coarse) {
  .my-button:active {
    background-color: yellow;
  }
}

<button class="my-button">для курсора применяем hover(красный), а при касании active(желтый)</button>

БЛОГ НА HUSL

:hover на mouse, а :active на tach

Ответы (1 шт):